Tablo görsel yapısı

Yardımcı etiketlerle tablo yapısını netleştirirsin.

Tablonun mantıksal bölümleri

HTML tablosu mantıksal bölümlere ayrılır: <thead> başlık satırını, <tbody> asıl veriyi, <tfoot> ise özet ya da toplam satırını taşır.

Bu üç bölüm tabloyu hem görsel hem erişilebilirlik açısından düzenler. <tfoot> teknik olarak <thead>'den hemen sonra da yazılabilir; ama en sık karşılaşılan yer <tbody>'den sonra, tablonun en sonudur. Bu ders bu sırayı uygulayacağız.

Görsel sıra

Tablonun görsel sırası şöyledir: önce <caption>, sonra <colgroup>, sonra <thead>, <tbody> ve en son <tfoot>.

<caption> her zaman tablonun ilk çocuğu olmalıdır; aksi halde ekran okuyucular başlığı tabloyla ilişkilendiremez. <colgroup> ise <caption>'dan sonra, <thead>'den önce yer alır. Bu sıra hem HTML standardına hem de görsel beklentiye uyar.

Uygulama Sıralı tablo görsel yapısını kur

Tablonun görsel sırasını kur. <table> içine sırayla şunları ekle: dolu bir <caption>, bir <colgroup> (içinde en az bir <col>), <thead> (içinde <th scope="col">), <tbody> (içinde <td>) ve en son <tfoot> (içinde <td>).

Örnek çözümü göster

<table>
  <caption>Çeyrek Bilanço</caption>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Kalem</th>
      <th scope="col">Tutar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gelir</td>
      <td>₺1,2M</td>
    </tr>
    <tr>
      <td>Gider</td>
      <td>₺0,8M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Açık</td>
      <td>₺0,4M</td>
    </tr>
  </tfoot>
</table>

Kendini test et

tfoot etiketi en sık nereye yerleşir?
- caption'dan önce
- tbody'den sonra, tablonun sonunda
- table'ın dışında
- colgroup'un içinde
Cevabı göster

tbody'den sonra, tablonun sonunda — Doğru. tfoot en sık tbody'den sonra, tablonun en sonunda yer alır.

caption'dan sonra ne gelir?

<table>
  <caption>Sipariş Özeti</caption>
  ____>
    <col>
    <col>
  </colgroup>
  <thead>...</thead>
</table>

Cevabı göster

<table>
  <caption>Sipariş Özeti</caption>
  <colgroup>>
    <col>
    <col>
  </colgroup>
  <thead>...</thead>
</table>

Öğeyi konumuyla eşleştir

caption

İlk çocuk
colgroup

caption'dan sonra
thead

colgroup'tan sonra
tfoot

En son

Sıradaki ders: Özet - Karşılaştırma tablosu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler