<Table> Etiketi ile Kullanılan Parametreler 2

 

 

 

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>

 

 
1.Satır 1.sütun 1.Satır 2.sütun
2.Satır 1.sütun 2.Satır 2.sütun

Ö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>

 

 
1.Satır 1.sütun 1.Satır 2.sütun
2.Satır 1.sütun 2.Satır 2.sütun

 

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>

 

 
1.Satır 1.sütun 1.Satır 2.sütun
2.Satır 1.sütun 2.Satır 2.sütun

 

Ö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>

 

 
1.Satır 1.sütun sağa yaslı
ortalı 2.Satır 2.sütun

 

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>

 

 
1.Satır 1.sütun 1.Satır Birleşmiş hücre
2.Satır 1.sütun 2.Satır 2.sütun 2.Satır 3.sütun

 

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>

 

 
1. Sütun birleşmiş hücreler 1.Satır 2.sütun 1.Satır 3.sütun
2.Satır 2.sütun 2.Satır 3.sütun

 

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>

 

 
1.Satır 1.sütun 1.Satır 2.sütun
2.Satır 1.sütun 2.Satır 2.sütun

 

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>

 

 
1.Satır 1.sütun 1.Satır 2.sütun
2.Satır 1.sütun 2.Satır 2.sütun

 

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

Ekleyen:admin

vuhuv.com.tr