Bu dersimizde Temel HTML5 Dersleri'nde gördüğümüz temel düzey tablolar konusunu biraz daha ileri götüreceğiz.
<thead> tablomuzdaki konu başlıklarının yer aldığı <th> etiketlerini kapsar. <tbody> tablodaki asıl içeriği belirtir. <tfoot> tablonun içeriklerinin hesaplanıp özetlendiği son satırını oluşturur. <col>, column yani sütun kelimesinin kısaltmasıdır. Tablodaki sütunlara stil vermek için kullanılır. Birden fazla sütuna stil vermek içinse <colgroup> etiketini kullanmalıyız. <caption> etiketi ile tablonun açıklamasını ya da tanımlamasını yazabiliriz.
Aşağıdaki örnekte tüm bu açıklamaları daha detaylı görebilirsiniz.
<table border="1" cellpadding="5">
<caption>Aylık Hasılat</caption>
<colgroup>
<col style="background-color:skyblue;">
<col style="background-color:lightgreen">
<col style="background-color:violet">
</colgroup>
<thead>
<tr>
<th>Ay</th>
<th>Gelir</th>
<th>Gider</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ocak</td>
<td>100 TL</td>
<td>20 TL</td>
</tr>
<tr>
<td>Şubat</td>
<td>80 TL</td>
<td>10 TL</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Toplam</td>
<td>180 TL</td>
<td>30 TL</td>
</tr>
</tfoot>
</table>
Bu tablonun ekran görüntüsü ise şu şekilde olacaktır:
Aylık Hasılat
Ay
Gelir
Gider
Ocak
100 TL
20 TL
Şubat
80 TL
10 TL
Toplam
180 TL
30 TL
cellpadding atfı tablonun iç hücre boşluğunu belirtmektedir. Örnekte 5px hücre içi boşluğu verilmiştir.
Bazen oluşturduğumuz tabloda iki satırı ya da sütunu birleştirmek isteyebiliriz. Bunun için colspan atfını kullanabiliriz.
Aşağıdaki örnekte bunu daha detaylı görebilirsiniz:
<table border="1" cellpadding="5" style="text-align: center;">
<tr>
<th>Rumuz</th>
<th colspan="2">e-Posta</th>
</tr>
<tr>
<td>zinzinzibidi</td>
<td>zinzinzibidi@gmail.com</td>
<td>zinzinzibidi@hotmail.com</td>
</tr>
</table>
Şimdi de çıktımıza bakalım.
Rumuz
e-Posta
zinzinzibidi
zinzinzibidi@gmail.com
zinzinzibidi@hotmail.com
Yukarıdaki örnekte e-Posta adlı tablo başlığı colspan atfı ile birleştirilmiştir. Aynı şekilde rowspan atfı ile iki satırı birleştirebiliriz:
<table border="1" cellpadding="5">
<tr>
<th>Rumuz</th>
<td>zinzinzibidi</td>
</tr>
<tr>
<th rowspan="2">e-Posta</th>
<td>zinzinzibidi@gmail.com</td>
</tr>
<tr>
<td>zinzinzibidi@hotmail.com</td>
</tr>
</table>
Çıktımız ise şu şekilde olacaktır:
Rumuz
zinzinzibidi
e-Posta
zinzinzibidi@gmail.com
zinzinzibidi@hotmail.com