thead, tbody ve tfoot Yapısı
Tablo satırlarını anlamsal başlık, gövde ve alt bilgi bölümlerinde düzenlemeyi öğrenin.
thead, tbody ve tfoot Yapısı, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Tablonun Bölümleri
Eksiksiz bir HTML tablosu, isteğe bağlı ancak önerilen üç bölüme sahiptir:
<thead>— başlık satırları<tbody>— gövde satırları (ana veriler)<tfoot>— alt bilgi satırları (toplamlar, özetler)
thead
<thead> öğesi başlık satırlarını kapsar:
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
...
</table>
<!-- thead rows repeat when printing multi-page tables -->
<!-- Screen readers associate header cells with data cells -->tbody
<tbody> öğesi ana veri satırlarını kapsar:
<table>
<thead>...</thead>
<tbody>
<tr>
<td>Widget A</td>
<td>5</td>
<td>$49.99</td>
</tr>
<tr>
<td>Widget B</td>
<td>3</td>
<td>$29.99</td>
</tr>
</tbody>
</table>tfoot
<tfoot> öğesi, genellikle toplamları veya özetleri içeren alt bilgi satırlarını kapsar:
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<td>$309.92</td>
</tr>
</tfoot>
</table>
<!-- tfoot is written after tbody in HTML but renders at the bottom -->
<!-- In print, tfoot appears at the bottom of every page -->Eksiksiz Yapılandırılmış Tablo
Üç bölümün tamamını içeren eksiksiz bir tablo:
<table>
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr><td>Widget A</td><td>2</td><td>$99.98</td></tr>
<tr><td>Widget B</td><td>1</td><td>$49.99</td></tr>
</tbody>
<tfoot>
<tr><th colspan="2">Grand Total</th><td>$149.97</td></tr>
</tfoot>
</table>thead/tbody/tfoot Neden Kullanılır?
Tablo yapısının yararları:
- Anlamsal yapı — ekran okuyucular başlık, veri ve özet arasındaki farkı anlar
- CSS hedefleme — bölümleri birbirinden bağımsız biçimlendirin
- Yazdırma — thead her yazdırılan sayfada yinelenir
- Kaydırma — CSS overflow ile tbody bölümünü bağımsız olarak kaydırın
Kaydırılabilir tbody
Başlık sabit kalırken yalnızca gövdenin kaymasını sağlayın:
table {
display: flex;
flex-direction: column;
height: 300px;
}
tbody {
overflow-y: auto;
flex: 1;
}Örtük tbody
<tbody> öğesini yazmazsanız tarayıcı bunu otomatik olarak ekler:
<!-- Written without tbody: -->
<table>
<thead>...</thead>
<tr><td>Data</td></tr> <!-- browser wraps this in tbody -->
</table>
<!-- Always write tbody explicitly for clarity -->
<!-- Some CSS selectors like tbody:nth-child won't work without explicit tbody -->Birden Çok tbody Öğesi
Bir tabloda birden çok <tbody> grubu bulunabilir:
<table>
<thead>...</thead>
<tbody>
<tr><td colspan="3"><strong>Category A</strong></td></tr>
<tr><td>Item 1</td><td>2</td><td>$10</td></tr>
</tbody>
<tbody>
<tr><td colspan="3"><strong>Category B</strong></td></tr>
<tr><td>Item 2</td><td>5</td><td>$25</td></tr>
</tbody>
</table>Tablo Bölümlerini Biçimlendirme
Bölümleri CSS ile hedefleyin:
thead {
background: #1e293b;
color: white;
}
tbody tr:hover {
background: #f0f9ff;
}
tfoot {
border-top: 2px solid #334155;
font-weight: bold;
background: #f8fafc;
}Ekran Okuyucu Davranışı
Uygun thead/tbody yapısıyla ekran okuyucular şunları yapabilir:
- Her veri hücresi için bağlam olarak sütun başlıklarını seslendirmek
- Bölümler arasında gezinmek (başlık bölgesi ile veri bölgesi arasında)
- Kullanıcılara kaç satır ve sütun bulunduğunu bildirmek
Birden Çok Satırlı thead Satırları
Karmaşık başlıklar için bir thead birden çok satıra sahip olabilir:
<thead>
<tr>
<th rowspan="2">Product</th>
<th colspan="2">Q1</th>
<th colspan="2">Q2</th>
</tr>
<tr>
<th>Units</th><th>Revenue</th>
<th>Units</th><th>Revenue</th>
</tr>
</thead>Hızlı Kontrol
tfoot, HTML kaynak kodunda oluşturulan tabloya kıyasla genellikle nerede bulunur?
Özet: thead tbody tfoot
Tablo yapısının temel noktaları:
<thead>— başlık satırları (yazdırma sırasında yinelenir)<tbody>— veri satırları (birden çok olabilir)<tfoot>— özet/toplam satırları- CSS bölüm hedeflemeyi ve erişilebilir tablo okumasını mümkün kılar
- Tarayıcılar eklese bile tbody'yi her zaman açıkça yazın
Sıkça Sorulan Sorular
“thead, tbody ve tfoot Yapısı” dersi ücretsiz mi?
Evet — “thead, tbody ve tfoot Yapısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“thead, tbody ve tfoot Yapısı” dersinde ne öğreneceğim?
Tablo satırlarını anlamsal başlık, gövde ve alt bilgi bölümlerinde düzenlemeyi öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“thead, tbody ve tfoot Yapısı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- table, tr, td ve th
- thead, tbody ve tfoot Yapısı
- Birleştirme için colspan ve rowspan
- Tablo Erişilebilirliği: scope, summary ve caption