Beyaz.Net İpucu
HTML'de Tablo Oluşturma
Html dilinde tablo oluşturma <table></table> etiketi arasına yazılır.Satır oluşturmak için tr, sütun oluşturmak için td etiketi kullanılır.
Aşagıdaki tabloyu html dilinde oluşturalım.
<table border="1">
<body>
<tr>
<td> </td>
<td>Beden</td>
<td>Türkçe<br />
</td>
</tr>
<tr>
<td>Sinem</td>
<td>95</td>
<td>80</td>
</tr>
<tr>
<td>Ahmet</td>
<td>100</td>
<td>65</td>
</tr>
</body>
</table>
Table yanındaki border=”1″ tablonun dış kenar çizgi kalınlığını belirler.Farklı bir değer kullanabilirsiniz.İlk hücre boş olduğu için   yazdık.Eğer yazmasaydık kenar çizgileri gözükmezdi.
Tablo içinde kullanılabilecek özellikler:
border:Dış kenar çizgi kalınlğını belirler
width:Tablonun piksel olarak genişliğini belirler.
heigth:Tablonun piksel olarak yüksekliğini belirler.
bordercolor:Tablonun çizgi rengini belirler.
bgcolor:Tablonun arkaplan rengini belirler
align: Veriyi yatay olarak hizalamak için kullanılır. left:sola , right: sağa , center:ortaya hizalar.
valign:Veriyi dikey olarak hizalamak için kullanılır.top:üste , bottom:alta , middle:ortaya hizalar.
align ve valign birarada kullanılabilir.Mesela üste sağa hizalamak için <td align=”right” valign=”top”>.....</td> kullanılır.
Satır birleştirmek için colspan özelliği kullanılır. ör: colspan=”3″ i yanyana olan üç hücreyi birleştirir.Sütun birleştirmek için rowspan özelliği kullanılır. ör: rowspan="5" i altalta olan beş hücreyi birleştirir.
Tablo oluştururken hücre verilerini başlık olarak yazmak için th etiketi kullanılır.<th></th> etiketi arasına yazılan hücreler başlık olarak yazılır.
Tablonun üstüne başlık eklemek için thead etiketi kullanılır.Tablonun altına veya üstüne ikinci bir başlık eklemek için caption etiketi kullanılır.
Tabloda hücreler ile dış kenarlık arasında boşluk bırakmak istiyorsak cellspacing özelliğini kullanabiliriz.
Tabloda hücreler verileri ile kenarlık arasında boşluk bırakmak istiyorsak cellpadding özelliğini kullanabiliriz.
Aşagıdaki tabloyu html dilinde oluşturalım.
| Beden | Türkçe |
|
| Sinem | 95 | 80 |
| Ahmet | 100 | 65 |
<body>
<tr>
<td> </td>
<td>Beden</td>
<td>Türkçe<br />
</td>
</tr>
<tr>
<td>Sinem</td>
<td>95</td>
<td>80</td>
</tr>
<tr>
<td>Ahmet</td>
<td>100</td>
<td>65</td>
</tr>
</body>
</table>
Table yanındaki border=”1″ tablonun dış kenar çizgi kalınlığını belirler.Farklı bir değer kullanabilirsiniz.İlk hücre boş olduğu için   yazdık.Eğer yazmasaydık kenar çizgileri gözükmezdi.
Tablo içinde kullanılabilecek özellikler:
border:Dış kenar çizgi kalınlğını belirler
width:Tablonun piksel olarak genişliğini belirler.
heigth:Tablonun piksel olarak yüksekliğini belirler.
bordercolor:Tablonun çizgi rengini belirler.
bgcolor:Tablonun arkaplan rengini belirler
align: Veriyi yatay olarak hizalamak için kullanılır. left:sola , right: sağa , center:ortaya hizalar.
valign:Veriyi dikey olarak hizalamak için kullanılır.top:üste , bottom:alta , middle:ortaya hizalar.
align ve valign birarada kullanılabilir.Mesela üste sağa hizalamak için <td align=”right” valign=”top”>.....</td> kullanılır.
Satır birleştirmek için colspan özelliği kullanılır. ör: colspan=”3″ i yanyana olan üç hücreyi birleştirir.Sütun birleştirmek için rowspan özelliği kullanılır. ör: rowspan="5" i altalta olan beş hücreyi birleştirir.
Tablo oluştururken hücre verilerini başlık olarak yazmak için th etiketi kullanılır.<th></th> etiketi arasına yazılan hücreler başlık olarak yazılır.
Tablonun üstüne başlık eklemek için thead etiketi kullanılır.Tablonun altına veya üstüne ikinci bir başlık eklemek için caption etiketi kullanılır.
Tabloda hücreler ile dış kenarlık arasında boşluk bırakmak istiyorsak cellspacing özelliğini kullanabiliriz.
Tabloda hücreler verileri ile kenarlık arasında boşluk bırakmak istiyorsak cellpadding özelliğini kullanabiliriz.