Ö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üscopeveheaders+idile erişilebilir başlık bağlantısı<caption>vearia-*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.