HTML · Tablolar — videolu atölye

Tablolar

İlişkili verileri başlıklarıyla birlikte bir tabloya dönüştürmek.

Kavramı kur

Tablo, satır ve sütunlar arasındaki ilişkiyi anlatır. Bir fiyat listesi veya ders programı buna örnektir. Sayfanın sağ ve sol sütununu tabloyla kurmak ise içerik anlamı ile yerleşimi karıştırır; görsel düzen için CSS Grid veya Flexbox kullanılır. Önce verinin satır ve sütun başlıklarını kâğıt üzerinde belirle.

Neden böyle çalışıyor?

th bir başlık hücresidir. scope="col" o başlığın bir sütunu, scope="row" bir satırı tanımladığını bildirir. caption tablonun ne hakkında olduğunu açıklayan bir başlıktır. Bu bilgiler ekran okuyucunun hücreler arasındaki ilişkiyi aktarabilmesine yardımcı olur; kalın yazı vermekle aynı şey değildir.

Çalışma sırası

Tablo küçük ekranda genişleyebilir. İçindeki veriyi sıkıştırıp okunamaz yapmak yerine gerektiğinde tabloyu kendi yatay kaydırma alanına al. Sayfanın tamamını yatay kaydırmak bir çözüm değildir. Başlıkların her satırla doğru eşleştiğini ve uzun kelimelerin hücre sınırlarını bozmadığını kontrol et.

İkinci örnek · 1

caption tablonun konusunu açıklar. Kodun tamamı yazılı derste bulunur.

<table>
  <caption>Haftalık çalışma</caption>
  <thead><tr><th scope="col">Gün</th><th scope="col">Dakika</th></tr></thead>
  <tbody>
    <tr><th scope="row">Pazartesi</th><td>30</td></tr>
    <tr><th scope="row">Salı</th><td>45</td></tr>
  </tbody>
</table>

Beklenen sonucu oku

CSS kenarlık ekler; veri ilişkisinin anlamını ise HTML taşır.

Beklenen: Gün ve Dakika sütunlarında Pazartesi 30, Salı 45 verileri.

Bir değeri sen değiştir

İki sütunlu ve üç veri satırlı bir tablo oluştur. caption ekle; satır ve sütun başlıklarında scope kullan.

Hata nereden gelir?

Başlık yerine td kullanıp yazıyı kalınlaştırmak başlık ilişkisini kurmaz; th ve scope kullan.

Kendi çözümünü kur

Ekranı 320 piksele daralt; gerekirse tabloyu overflow-x:auto alanına al. Önce yalnızca başlık satırını yaz, sonra her satır için aynı veri düzenini tekrar et.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<div style="overflow-x:auto">
<table>
<caption>Örnek fiyatlar</caption>
<tr><th scope="col">Ürün</th><th scope="col">TL</th></tr>
<tr><th scope="row">Defter</th><td>25</td></tr>
<tr><th scope="row">Kalem</th><td>10</td></tr>
</table>
</div>

Kendini kontrol et

caption ve th aynı şeyi mi yapar? Yanıt: Hayır. caption bütün tablonun konusunu, th belirli satır veya sütunun başlığını belirtir.

Beklenen: İki ürün ve fiyatları; kapsayıcı gerektiğinde yatay kaydırılır.