Başlık ve caption

<caption> etiketiyle tabloyu başlıklandırıp erişilebilirliği artırırsın.

caption etiketi

Bir tabloya başlık koymak için <caption> etiketi kullanılır. Bu etiket tablonun ne hakkında olduğunu tek cümleyle anlatır: 'Aylık Satışlar', 'Sınıf Listesi' gibi.

<caption> etiketi <table> açılışından hemen sonra, diğer tüm etiketlerden önce yazılır. Tarayıcı bu başlığı tablonun üstünde gösterir. Ekran okuyucu kullanıcıları tabloyu okumadan önce başlığı duyduğu için içeriğe hazırlanır.

Başlıklı tablo örneği

Başlıklı bir fiyat listesi şöyle görünür:

<table>
  <caption>Kahve Menüsü</caption>
  <tr>
    <th scope="col">İçecek</th>
    <th scope="col">Fiyat</th>
  </tr>
  <tr>
    <td>Espresso</td>
    <td>25 TL</td>
  </tr>
</table>

Bu yapıda başlık, tablonun üstünde tek satır olarak görünür. Erişilebilirlik açısından her tabloya bir <caption> eklemek iyi bir alışkanlıktır.

Uygulama Başlıklı bir tablo yaz

Body içine bir <table> ekle. <table> açılışından hemen sonra bir <caption> başlığı yaz (örnek: Aylık Satışlar). Sonra en az bir <tr> satırı ekle; içinde bir <th> ve bir <td> olsun (örnek: Ocak / 5000 TL).

Örnek çözümü göster

<body>
  <table>
    <caption>Aylık Satışlar</caption>
    <tr>
      <th scope="col">Ay</th>
      <th scope="col">Tutar</th>
    </tr>
    <tr>
      <td>Ocak</td>
      <td>5000 TL</td>
    </tr>
  </table>
</body>

Kendini test et

<caption> etiketi tabloda nereye yazılır?
- <table>'den hemen sonra, diğerlerinden önce
- <table>'den hemen önce
- Tablonun en sonunda, </table>'den önce
- Her <tr>'nin içinde
Cevabı göster

<table>'den hemen sonra, diğerlerinden önce — Doğru. caption <table> açılışından hemen sonra, tüm satırlardan önce yazılır.

Tablo başlığını aç

<table>
  ____>Fiyat Listesi</caption>
  <tr><td>Kahve</td><td>20 TL</td></tr>
</table>

Cevabı göster

<table>
  <caption>Fiyat Listesi</caption>
  <tr><td>Kahve</td><td>20 TL</td></tr>
</table>

Etiketi rolüyle eşleştir

<caption>

Tabloyu tanıtan başlık
<table>

Tablo kabı
<th>

Sütun başlığı hücresi
<tr>

Satır

Sıradaki ders: Hücre birleştirme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler