İleri Seviye Tablo Bölümlendirme
Bu dersimizde HTML'in yeni standartlarına göre ileri seviye tablo bölümlendirmeyi öğreneceksiniz. Yeni standartlara göre tablomuzu 3 bölüme ayırırız. Bu bölümler baş, gövde ve ayak bölümleridir.
Adım adım aşağıdaki namaz vakitleri tablosunu bölümlendireceğiz. Öncelikle aşağıdaki tabloyu inceleyiniz.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Namaz Vakitleri</title>
</head>
<body>
<table border="1">
<tr>
<th>Günler</th>
<th>İmsak</th>
<th>Güneş</th>
<th>Öğle</th>
<th>İkindi</th>
<th>Akşam</th>
<th>Yatsı</th>
</tr>
<tr>
<td>Pazartesi</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:11</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Salı</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:11</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Çarşamba</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:12</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Perşembe</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:12</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Cuma</td>
<td>03:28</td>
<td>05:27</td>
<td>13:13</td>
<td>17:12</td>
<td>20:48</td>
<td>22:38</td>
</tr>
<tr>
<td>Cumartesi</td>
<td>03:28</td>
<td>05:28</td>
<td>13:13</td>
<td>17:12</td>
<td>20:48</td>
<td>22:38</td>
</tr>
<tr>
<td>Pazar</td>
<td>03:27</td>
<td>05:27</td>
<td>13:11</td>
<td>17:11</td>
<td>20:46</td>
<td>22:37</td>
</tr>
</table>
</body>
</html>Gördüğünüz gibi bu tablomuzun başlık kısmı namaz vakitlerinin adlarıdır ve biz bu adları <th> etiketiyle gösterdik. Tablomuzu başlık bölümünü oluşturmak için <thead> etiketini kullanırız. Yani <th> ile tanımladığımız adların bir üst etiketi olan <tr> etiketini <thead> etiketleri arasına alarak başlık bölümünü oluştururuz. Aşağıda <thead> etiketine ait bir kullanım örneği verilmiştir.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Namaz Vakitleri</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Günler</th>
<th>İmsak</th>
<th>Güneş</th>
<th>Öğle</th>
<th>İkindi</th>
<th>Akşam</th>
<th>Yatsı</th>
</tr>
</thead>
<tr>
<td>Pazartesi</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:11</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Salı</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:11</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Çarşamba</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:12</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Perşembe</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:12</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Cuma</td>
<td>03:28</td>
<td>05:27</td>
<td>13:13</td>
<td>17:12</td>
<td>20:48</td>
<td>22:38</td>
</tr>
<tr>
<td>Cumartesi</td>
<td>03:28</td>
<td>05:28</td>
<td>13:13</td>
<td>17:12</td>
<td>20:48</td>
<td>22:38</td>
</tr>
<tr>
<td>Pazar</td>
<td>03:27</td>
<td>05:27</td>
<td>13:11</td>
<td>17:11</td>
<td>20:46</td>
<td>22:37</td>
</tr>
</table>
</body>
</html>Gördüğünüz gibi tablomuzun baş kısmını yani namaz vakitlerinin isimlerini <thead> etiketiyle guruplandırmış olduk.
Aynı şekilde tablomuzun gövdesini yani namaz vakitlerini ise <tbody> etiketini kullanarak gruplandırabiliriz. Aşağıda <tbody> etiketine ait bir kullanım örneği verilmiştir.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Namaz Vakitleri</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Günler</th>
<th>İmsak</th>
<th>Güneş</th>
<th>Öğle</th>
<th>İkindi</th>
<th>Akşam</th>
<th>Yatsı</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pazartesi</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:11</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Salı</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:11</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Çarşamba</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:12</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Perşembe</td>
<td>03:27</td>
<td>05:27</td>
<td>13:12</td>
<td>17:12</td>
<td>20:47</td>
<td>22:38</td>
</tr>
<tr>
<td>Cuma</td>
<td>03:28</td>
<td>05:27</td>
<td>13:13</td>
<td>17:12</td>
<td>20:48</td>
<td>22:38</td>
</tr>
<tr>
<td>Cumartesi</td>
<td>03:28</td>
<td>05:28</td>
<td>13:13</td>
<td>17:12</td>
<td>20:48</td>
<td>22:38</td>
</tr>
<tr>
<td>Pazar</td>
<td>03:27</td>
<td>05:27</td>
<td>13:11</td>
<td>17:11</td>
<td>20:46</td>
<td>22:37</td>
</tr>
</tbody>
</table>
</body>
</html>Bu dersin başında da dediğimiz gibi tablomuz üç bölümden oluşur. Birincisi tablomuzun başlık bölümüdür. Tablomuzun başlık bölümünü <thead> etiketiyle oluştururuz. İkincisi tablomuzun gövde bölümüdür. Bu bölümü ise <tbody> etiketiyle oluştururuz. Tablomuzun son bölümü ise ayak bölümüdür. Bu bölümü ise <tfoot> etiketiyle oluştururuz.
<tfoot> etiketi tablonun en sonundaki bölümdür ve bu bölüm genellikle her tabloda olmaz. Çünkü son bölüm genellikle bir sonucu ifade etmek için kullanılır. <tfoot> etiketini kullanmak için yeni bir tablo örneği oluşturalım ve bu tablomuz çekilen zikir sayılarıyla ilgili olsun. Günler ve çekilen zikir sayısı yazılarını yani başlıkları <thead> etiketiyle guruplandıralım. Çekilen zikir sayılarını ve günleri iste <tbody> etiketiyle guruplandıralım. Son olarak toplam çekilen zikir sayısını <tfoot> etiketiyle guruplandırarak ileri seviye tablo bölümlendirme dersimizi tamamlamış olalım.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Namaz Vakitleri</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Günler</th>
<th>Çekilen Zikir Sayısı</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pazartesi</td>
<td>2000</td>
</tr>
<tr>
<td>Salı</td>
<td>1000</td>
</tr>
<tr>
<td>Çarşamba</td>
<td>1000</td>
</tr>
<tr>
<td>Perşembe</td>
<td>2000</td>
</tr>
<tr>
<td>Cuma</td>
<td>5000</td>
</tr>
<tr>
<td>Cumartesi</td>
<td>1000</td>
</tr>
<tr>
<td>Pazar</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Toplam</td>
<td>13000</td>
</tr>
</tfoot>
</table>
</body>
</html>