Özet - Karşılaştırma tablosu

Tüm tablo tekniklerini uygulayan bir ürün karşılaştırma tablosu yazarsın.

Beş tekniğin özeti

Bu grupta tabloları ileri seviyede ele aldık. Şu beş tekniği bir araya getirdik:

<colgroup> ve <col> ile sütunlara ortak stil köprüsü
scope ve headers+id ile erişilebilir başlık bağlantısı
<caption> ve aria-* ile tabloyu tanıtma
sarma kap ile küçük ekranlara uyumluluk
caption, colgroup, thead, tbody, tfoot sıralı görsel yapı

Şimdi hepsini bir karşılaştırma tablosunda birleştireceksin.

Uygulama Tam bir karşılaştırma tablosu yaz

Tüm tablo tekniklerini uygulayan bir karşılaştırma tablosu yaz. <table> içine dolu bir <caption> koy. Caption'dan sonra <colgroup> ve içinde bir <col> ile bir <col span="2"> ekle. Sonra <thead> içinde üç <th> koy; her birine scope="col" ve birer id ver. <tbody>'ye en az iki satır ekle; her satırın ilk hücresi scope="row" özniteliğine sahip <th>, diğer hücreler <td> ve headers özniteliği ilgili th id'lerine işaret etsin. Tabloyu <tfoot> ile bitir.

Örnek çözümü göster

<table>
  <caption>Telefon Karşılaştırması — 2026</caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col" id="ozellik">Özellik</th>
      <th scope="col" id="model-a">Model A</th>
      <th scope="col" id="model-b">Model B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="agirlik">Ağırlık</th>
      <td headers="agirlik model-a">180 g</td>
      <td headers="agirlik model-b">195 g</td>
    </tr>
    <tr>
      <th scope="row" id="ekran">Ekran</th>
      <td headers="ekran model-a">6.1 inç</td>
      <td headers="ekran model-b">6.7 inç</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" id="sonuc">Sonuç</th>
      <td headers="sonuc model-a">Hafif</td>
      <td headers="sonuc model-b">Geniş ekran</td>
    </tr>
  </tfoot>
</table>

Kendini test et

Tekniği rolüyle eşleştir

colgroup

Sütunlara stil köprüsü
headers+id

Karmaşık başlık bağlantısı
aria-describedby

Tabloyu açıklamaya bağlar
Sarma kap

Küçük ekranda kaydırma
Karşılaştırma tablosunda sütun başlığı için en iyi uygulama hangisidir?
- th'ye scope="col" ve id ver
- td'ye scope="col" ver
- thead kullanma
- colgroup'u kaldır
Cevabı göster

th'ye scope="col" ve id ver — Doğru. th'ye hem scope="col" hem id vermek erişilebilirliği en üst düzeye çıkarır.

Sıradaki ders: Proje: Veri tablosu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler