CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Başlık ve caption

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

<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

  1. <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.

  2. 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>

  3. 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

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

1 Belge temelleri

  1. HTML nedir?
  2. Belge iskeleti
  3. Head ve meta etiketleri
  4. Başlık ve dil
  5. Yorumlar ve okunabilirlik
  6. Özet - İlk HTML sayfam

2 Metin içeriği

  1. Başlıklar: h1–h6
  2. Paragraflar
  3. Satır sonu ve yatay çizgi
  4. Vurgu ve önemli metin
  5. Alıntı ve kaynak
  6. Özet - Makale sayfası

3 Proje: Hakkımda sayfası

  1. Proje: Hakkımda sayfası
  2. İskelet ve başlık
  3. Tanıtım metni
  4. Vurgu ve ayrım
  5. Proje sonu - Hakkımda

4 Bağlantılar ve gezinme

  1. Çapa bağlantıları
  2. Mutlak ve göreli URL'ler
  3. Sayfa içi bağlantılar
  4. Bağlantı hedefleri
  5. E-posta ve telefon bağlantıları
  6. Özet - Gezinme menüsü

5 Listeler

  1. Sırasız listeler
  2. Sıralı listeler
  3. Açıklama listeleri
  4. İç içe listeler
  5. Liste öğelerinde bağlantı
  6. Özet - İçindekiler tablosu

6 Proje: Kartvizit sayfası

  1. Proje: Kartvizit sayfası
  2. İsim ve unvan
  3. İletişim listesi
  4. Beceriler ve bağlantılar
  5. Proje sonu - Kartvizit

7 Görseller ve medya

  1. Görsel ekleme
  2. Görsel boyutları
  3. Figure ve figcaption
  4. Ses ve video
  5. Alternatif kaynaklar
  6. Özet - Medya galerisi

8 Tablolara giriş

  1. Tablo iskeleti
  2. Başlık hücreleri
  3. Tablo bölümleri
  4. Başlık ve caption
  5. Hücre birleştirme
  6. Özet - Ders programı tablosu

9 Proje: Tarif sayfası

  1. Proje: Tarif sayfası
  2. Tarif başlığı ve özet
  3. Malzeme listesi
  4. Adımlar ve pişirme tablosu
  5. Proje sonu - Tarif sayfası

10 Formlara giriş

  1. Form iskeleti
  2. Etiketli input
  3. Input türleri
  4. Textarea ve button
  5. Seçim alanları
  6. Özet - Geri bildirim formu

11 Anlamsal etiketlere giriş

  1. Anlamsal etiketler neden önemli
  2. Header ve footer
  3. Nav ve main
  4. Article ve section
  5. Aside ve address
  6. Özet - Anlamsal blog iskeleti

12 Başlangıç finali

  1. Meydan okuma - Belge iskeleti
  2. Meydan okuma - Metin ve bağlantılar
  3. Meydan okuma - Listeler ve tablolar
  4. Meydan okuma - Form ve anlamsal yapı
  5. Meydan okuma - Başlangıç projesi