Başlık hücreleri

HTML kursu · Başlangıç · Ders 42/68

<th> etiketi ve scope özniteliğiyle erişilebilir tablo başlıkları oluşturursun.

Başlık hücreleri: th

<td> herhangi bir veri hücresidir; ancak tablonun ilk satırı genelde başlık taşır: 'Meyve', 'Fiyat', 'Gün' gibi. Bu başlıklar için <td> yerine <th> (table header) kullanılır.

<th> hücreleri tarayıcıda varsayılan olarak önemli ve ortalanmış gösterilir. Asıl önemi görünümde değil, anlamdadır: ekran okuyucular bu hücreyi başlık olarak okur ve sütunla ilişkilendirir.

scope özniteliği

Bir <th> hücresinin hangi hücrelerin başlığı olduğunu scope özniteliğiyle açıkça belirtirsin. İki yaygın değeri vardır:

scope="col" — bu hücre bir sütunun başlığıdır
scope="row" — bu hücre bir satırın başlığıdır

Örnek: <th scope="col">Meyve</th>. Bu küçük dokunuş ekran okuyucu kullanan kişiye tabloyu sesli olarak doğru tarif eder.

Başlıklı fiyat listesi

Başlık satırı ve bir veri satırı içeren bir örnek:

<table>
  <tr>
    <th scope="col">Meyve</th>
    <th scope="col">Fiyat</th>
  </tr>
  <tr>
    <td>Elma</td>
    <td>5 TL</td>
  </tr>
</table>

İlk satırın tüm hücreleri <th>; alt satırlar <td>. Bu küçük fark tabloyu hem daha okunaklı hem de daha erişilebilir yapar.

Uygulama Başlık satırı ekle

Body içine bir <table> ekle. İlk <tr> satırında iki <th scope="col"> başlığı olsun (örnek: Meyve, Fiyat). İkinci <tr> satırında iki <td> verisi olsun (örnek: Elma, 5 TL).

Örnek çözümü göster

<body>
  <table>
    <tr>
      <th scope="col">Meyve</th>
      <th scope="col">Fiyat</th>
    </tr>
    <tr>
      <td>Elma</td>
      <td>5 TL</td>
    </tr>
  </table>
</body>

Kendini test et

Hangi durumda <td> yerine <th> kullanmalısın?
- Renkli bir hücre yapmak istediğinde
- Sütun ya da satır başlığı yazdığında
- Daha geniş bir hücre istediğinde
- Hücreyi boş bırakmak istediğinde
Cevabı göster

Sütun ya da satır başlığı yazdığında — Doğru. <th> sütun veya satır başlıkları içindir; anlam ve erişilebilirlik katar.

Sütun başlığını işaretle

<th ____>Meyve</th>

Cevabı göster

<th scope="col">Meyve</th>

Değeri anlamıyla eşleştir

scope="col"

Sütun başlığı
scope="row"

Satır başlığı
<th>

Başlık hücresi
<td>

Veri hücresi

Başlangıç bölümündeki tüm dersler

Başlık hücreleri