Web Tasarım ve Prog.Html<Table> Etiketi ile Kullanılan Parametreler 2

 

• border
• bordercolor
• bgcolor
• background
• Width
• Height
• Align
• Valign
• Colspan
  
• Rowspan
• Cellspacing
• Cellpadding

 

 

Width

Tablonun piksel cinsinden genişliğini belirtmek için kullanılır. Oransal olarak genişlik verilecek ise genişlik oranı % olarak girilmelidir.

Height

Tablonun piksel cinsinden yüksekliğini belirtmek için kullanılır.

Örnek : Tablo genişliği ve yüksekliği

<table border="1" width="400" height="250">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td>1.Satır 2.sütun </td> 
  </tr>
  <tr>
    <td>2.Satır 1.sütun </td> 
    <td>2.Satır 2.sütun </td> 
  </tr>
</table>

 

Örnek : Tablo genişliği; 100% şekliden belirtilierek tablonun bulunduğu konumun genişliği kadar boyutlandırılır.

<table border="1" width="100%" height="200">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td>1.Satır 2.sütun </td> 
  </tr>
  <tr>
    <td>2.Satır 1.sütun </td> 
    <td>2.Satır 2.sütun </td> 
  </tr>
</table>

 

 

Align

Tablo da td içerisinde kullanıldığında hücre içerisindeki metni yatay olarak hizalamak için kullanılır.

Table içesrisinde kullanıldığında tabloyu sayfaya göre hizalar.

Alabileceği değerler

• center : ortala
• left : sola hizala
• right:sağa hizala
• justify : iki yana yasla

 

Örnek : Tabloyu hizalama

<table border="1" width="300" align="right">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td>1.Satır 2.sütun </td> 
  </tr>
  <tr>
    <td>2.Satır 1.sütun </td> 
    <td>2.Satır 2.sütun </td> 
  </tr>
</table>

 

 

Örnek :  Hücre içindeki metni hizalama

<table border="1" width="300">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td align="right">sağa yaslı </td> 
  </tr>
  <tr>
    <td align="center">ortalı</td> 
    <td>2.Satır 2.sütun </td> 
  </tr>
</table>

 

 

Valign

Dikey Hizalama

 

Colspan

Bu parametre aynı satırdaki hücrelerin birleştirilmesi için kullanılır. Colspan parametresinin eklendiği hücre parametrede girilen değer kadar hücreye denk olacak şekilde görünür.

<table border="1" width="100%" heigh="100">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td>1.Satır 2.sütun </td> 
    <td>1.Satır 3.sütun </td> 
  </tr>
  <tr>
    <td>2.Satır 1.sütun </td> 
    <td>2.Satır 2.sütun </td> 
    <td>2.Satır 3.sütun </td> 
  </tr>
</table>

 

Yukarıdaki tablo yapısında 1. satırdaki 2. ve 3. sütunları birleştirmek için 2. sütuna colspan="2" değeri eklenerek 3. sütunun bulunduğu kısım kaldırılır.

Örnek:

<table border="1">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td colspan="2">1.Satır Birleşmiş hücre </td> 
  </tr>
  <tr>
    <td>2.Satır 1.sütun </td> 
    <td>2.Satır 2.sütun </td> 
    <td>2.Satır 3.sütun </td>  
  </tr>
</table>

 

 

Rowspan

Bu parametre ile aynı sütunda bulunan hücreler birleştirili

Örnek:

<table border="1">   
  <tr>
    <td rowspan="2">1. Sütun birleşmiş hücreler </td> 
    <td>1.Satır 2.sütun </td> 
    <td>1.Satır 3.sütun </td>  
  </tr>
  <tr> 
    <td>2.Satır 2.sütun </td> 
    <td>2.Satır 3.sütun </td>  
  </tr>
</table>

 

 

Cellspacing

Tablodaki hücrelerin birbirlerine olan uzaklığını belirlemek için kullanılır.-.

Örnek :

<table border="1" cellspacing="15">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td>1.Satır 2.sütun </td>  
  </tr>
  <tr> 
    <td>2.Satır 1.sütun </td> 
    <td>2.Satır 2.sütun </td>  
  </tr>
</table>

 

 

Cellpadding

Hücreler içindeki verilerin hücre kenarına olan uzaklığını belirlemek için kullanılır.

Örnek :

<table border="1" cellpadding="15">   
  <tr>
    <td>1.Satır 1.sütun </td> 
    <td>1.Satır 2.sütun </td>  
  </tr>
  <tr> 
    <td>2.Satır 1.sütun </td> 
    <td>2.Satır 2.sütun </td>  
  </tr>
</table>

 

 

 Tablo örnek uygulama soruları için tıklayınız.