Başlık ve caption
Tablo iskeletini, başlık satırını ve caption'ı kurarsın.
Tabloyu aç: caption ve thead
Bir tabloyu table etiketi sarar. İçine önce caption (başlık), sonra thead (başlık satırı bölümü) gelir. thead içinde her satır bir tr, her başlık hücresi bir th'dir. Sütun başlığı olan th'lere scope="col" eklenir; böylece ekran okuyucu hücrenin bir sütun başlığı olduğunu bilir.
scope="col" ve scope="row"
scope="col" bir hücrenin sütun başlığı olduğunu söyler; tablonun üstündeki başlık hücreleri için kullanılır. scope="row" ise satır başlığı demektir; genellikle tbody'deki ilk hücreye verilir (örneğin ay adı). İkisi de ekran okuyucunun hücre ilişkilerini kurmasını sağlar. Yanlış değer kullanmak tabloyu yanıltıcı yapar; bu yüzden konumuna göre doğru scope'u seç.
Uygulama Head'i doldur, tabloyu caption ve thead ile aç
Önceki dersin boş iskeletini al. <html>'e lang="tr" ekle. <head> içine meta charset=utf-8, viewport (width=device-width, initial-scale=1) ve title (içeriği Aylık Satış Raporu) ekle. <body>'ye bir <table> aç; içine caption (Aylık Satış Raporu — 2026), sonra thead içinde bir tr ve dört th scope="col" (Ay, Ürün, Adet, Ciro) ekle.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aylık Satış Raporu</title>
</head>
<body>
<table>
<caption>Aylık Satış Raporu — 2026</caption>
<thead>
<tr>
<th scope="col">Ay</th>
<th scope="col">Ürün</th>
<th scope="col">Adet</th>
<th scope="col">Ciro</th>
</tr>
</thead>
</table>
</body>
</html>Kendini test et
-
Sütun başlığı olan bir th hücresinde scope ne olmalı?
<th scope="?">Ay</th>- col
- row
- column
- header
Cevabı göster
col — Doğru. scope="col" hücrenin bir sütun başlığı olduğunu söyler.
-
th hücresinin scope'unu tamamla
<th ____>Ay</th>Cevabı göster
<th scope="col">Ay</th> -
Tablo elemanını amacıyla eşleştir
- caption
- Tablonun başlığı
- thead
- Sütun başlıkları bölümü
- th
- Başlık hücresi
- scope
- Hücre kapsamı