Tablolar

Önceki ders belgeyi başka kaynaklara bağladı. Bu ders konunun son yapısını ele alır: iki boyutlu veri.

Ölçüm kayıtları bir liste değildir. Her satırın birden çok alanı, her alanın bir başlığı vardır ve bir hücrenin anlamı, hem satırının hem sütununun başlığından çıkar. Tablo ögesi bu iki boyutlu ilişkiyi bildirir.

Tablo Ne Zaman Kullanılır

Ölçüt tektir: veri iki boyutlu mu? Her hücrenin anlamı bir satır başlığı ve bir sütun başlığının kesişiminden çıkıyorsa yapı bir tablodur.

Tablo ögelerinin sayfa düzeni kurmak için kullanılması ayrı bir konudur ve yapılmaz: düzen sunum katmanının işidir ve tablo ögesi kullanıldığında ekran okuyucu içeriği satır ve sütun ilişkisi olarak duyurur — var olmayan bir veri ilişkisi bildirilmiş olur.

Temel Yapı

<table>
  <caption>Kuzey Yamaç istasyonu haftalık ölçüm özeti</caption>
  <thead>
    <tr><th scope="col">Gün</th><th scope="col">En düşük (°C)</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Pazartesi</th><td>-4</td></tr>
    <tr><th scope="row">Salı</th><td>-6</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Ortalama</th><td>-5</td></tr>
  </tfoot>
</table>

caption tablonun adıdır ve tablonun ilk çocuğu olarak yazılır. Tablonun ne gösterdiğini bildirir; bir ekran okuyucu tabloya girildiğinde bu metni duyurur, dolayısıyla tabloyu bağlamı dışında adlandırır. Tablonun üstüne ayrı bir paragraf olarak yazılmış bir başlık bu işi görmez: tabloyla arasında bildirilmiş bir bağ yoktur.

thead, tbody ve tfoot tabloyu üç bölüme ayırır. Yazılmasalar da tbody ayrıştırıcı tarafından kurulur. Yazılmalarının gerekçesi, uzun tablolarda başlık satırının veriden ayrılmasıdır: bu ayrım hem sunum katmanına hem de tabloyu bölerek işleyen araçlara bilgi verir.

tr bir satır, th bir başlık hücresi, td bir veri hücresidir. th ile td arasındaki fark görünüm değildir: başlık hücresi, kendisine bağlı veri hücrelerini adlandırır.

Başlığın Kapsamı

scope özniteliği bir başlık hücresinin hangi yöndeki hücreleri adlandırdığını bildirir: col sütununu, row satırını. Basit tablolarda bu bildirim, hücre–başlık eşleşmesini tahmine bırakmaz.

Sütun başlıkları thead içinde, satır başlıkları her satırın ilk hücresinde bulunur. İkisi birden bulunabilir — yukarıdaki örnekte Pazartesi bir satır başlığı, En düşük bir sütun başlığıdır ve -4 hücresi her ikisine bağlıdır.

Izgara ve Yayılma

Bir tablo, kaynak metinde satır satır yazılır ama gerçekte bir ızgaradır (grid). colspan ve rowspan öznitelikleri bir hücrenin birden çok ızgara gözünü kaplamasını sağlar ve bu durumda kaynak metindeki hücre sayısı ile ızgaradaki göz sayısı ayrışır.

Aşağıdaki betik ızgarayı kurar ve her veri hücresinin başlıklarını hesaplar.

// tablolar.mjs — izgarayi colspan/rowspan ile kurar, hucre basliklarini bulur
const satirlar = [
  [{ b: 1, m: "Gün", rowspan: 2 }, { b: 1, m: "Sıcaklık (°C)", colspan: 2 }, { b: 1, m: "Nem (%)", rowspan: 2 }],
  [{ b: 1, m: "En düşük" }, { b: 1, m: "En yüksek" }],
  [{ b: 1, m: "Pazartesi" }, { m: "-4" }, { m: "3" }, { m: "72" }],
  [{ b: 1, m: "Salı" }, { m: "-6" }, { m: "1" }, { m: "68" }],
];

const izgara = [];
const yerlestir = (s, k, hucre) => {
  izgara[s] ??= [];
  izgara[s][k] = hucre;
};

let satirNo = 0;
for (const satir of satirlar) {
  let sutunNo = 0;
  for (const hucre of satir) {
    while (izgara[satirNo]?.[sutunNo]) sutunNo += 1; // dolu yeri atla
    const genislik = hucre.colspan ?? 1;
    const yukseklik = hucre.rowspan ?? 1;
    for (let s = 0; s < yukseklik; s += 1) {
      for (let k = 0; k < genislik; k += 1) yerlestir(satirNo + s, sutunNo + k, hucre);
    }
    sutunNo += genislik;
  }
  satirNo += 1;
}

console.log("--- izgara ---");
for (const satir of izgara) {
  console.log(satir.map((h) => (h.b ? "[" + h.m + "]" : h.m).padEnd(15)).join("").trimEnd());
}

function basliklar(s, k) {
  const satirBasliklari = [];
  for (let i = k - 1; i >= 0; i -= 1) {
    const h = izgara[s][i];
    if (h?.b && !satirBasliklari.includes(h.m)) satirBasliklari.unshift(h.m);
  }
  const sutunBasliklari = [];
  for (let i = s - 1; i >= 0; i -= 1) {
    const h = izgara[i][k];
    if (h?.b && !sutunBasliklari.includes(h.m)) sutunBasliklari.unshift(h.m);
  }
  return [...satirBasliklari, ...sutunBasliklari];
}

console.log("--- veri hucrelerinin basliklari ---");
for (let s = 2; s < izgara.length; s += 1) {
  for (let k = 0; k < izgara[s].length; k += 1) {
    const hucre = izgara[s][k];
    if (hucre.b) continue;
    console.log(hucre.m.padStart(3), "<-", basliklar(s, k).join(" / "));
  }
}

--- izgara ---
[Gün]          [Sıcaklık (°C)][Sıcaklık (°C)][Nem (%)]
[Gün]          [En düşük]     [En yüksek]    [Nem (%)]
[Pazartesi]    -4             3              72
[Salı]         -6             1              68
--- veri hucrelerinin basliklari ---
 -4 <- Pazartesi / Sıcaklık (°C) / En düşük
  3 <- Pazartesi / Sıcaklık (°C) / En yüksek
 72 <- Pazartesi / Nem (%)
 -6 <- Salı / Sıcaklık (°C) / En düşük
  1 <- Salı / Sıcaklık (°C) / En yüksek
 68 <- Salı / Nem (%)

Kaynak yapıda ilk satır üç hücre, ikinci satır iki hücre taşır; ızgaradaysa her satır dört gözdür. Gün ve Nem (%) başlıkları iki satıra, Sıcaklık (°C) başlığı iki sütuna yayılmıştır ve ızgarada aynı hücre birden çok gözde görünür.

Çıktının ikinci bölümü, işaretlemenin taşıdığı asıl bilgiyi gösterir. -4 değeri tek başına anlamsızdır; bağlı olduğu üç başlıkla birlikte “Pazartesi günü sıcaklığın en düşük değeri” anlamına gelir. Ekran okuyucular bir hücreye girildiğinde bu başlıkları duyurur; kullanıcı satırın ve sütunun neresinde olduğunu böyle izler.

İşaretlemenin karşılığı şudur:

<tr>
  <th scope="col" rowspan="2">Gün</th>
  <th scope="colgroup" colspan="2">Sıcaklık (°C)</th>
  <th scope="col" rowspan="2">Nem (%)</th>
</tr>
<tr>
  <th scope="col">En düşük</th>
  <th scope="col">En yüksek</th>
</tr>

colgroup kapsam değeri, başlığın tek bir sütunu değil bir sütun grubunu adlandırdığını bildirir; satır yönünde karşılığı rowgroup değeridir.

Karmaşık Tablolarda Açık Bağ

Yukarıdaki hesap komşuluğa dayanır ve başlıklar düzenli yerleştirildiğinde doğru sonuç verir. Düzensiz tablolarda —başlıklar tablonun ortasında ya da birden çok düzeyde— bu tahmin yeterli olmaz. Bu durumda bağ açıkça bildirilir: her başlık hücresine bir id verilir, her veri hücresi headers özniteliğinde bağlı olduğu başlıkların kimliklerini sayar.

<table>
  <tr>
    <th id="gun" rowspan="2">Gün</th>
    <th id="sic" colspan="2">Sıcaklık (°C)</th>
  </tr>
  <tr>
    <th id="sic-dus">En düşük</th>
    <th id="sic-yuk">En yüksek</th>
  </tr>
  <tr>
    <th id="gun-pzt" headers="gun">Pazartesi</th>
    <td headers="gun-pzt sic sic-dus">-4</td>
    <td headers="gun-pzt sic sic-yuk">3</td>
  </tr>
</table>

Açık bağ bakımı pahalıdır: her hücre kendi başlıklarını sayar ve kimliklerin belge içinde tek olması gerekir. Bu maliyet ancak yapı komşulukla çözülemediğinde ödenir. Daha iyi bir çözüm çoğu durumda tabloyu bölmektir — karmaşık bir tablo, iki basit tabloya ayrıldığında hem yazımı hem okunması kolaylaşır.

Sütun Grupları

colgroup ve col ögeleri sütunlara toplu olarak öznitelik vermek içindir ve tablonun başında, caption ögesinden sonra yazılır. İçerik taşımazlar; ızgaradaki sütunları adlandırırlar. Kullanımları sunum katmanıyla ilişkilidir ve veri bağı kurmazlar; hücre başlıkları yerine geçmezler.

İstasyon Belgesinde

<h2>Haftalık Özet</h2>
<table>
  <caption>Kuzey Yamaç istasyonu, son yedi günün günlük uç değerleri</caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Gün</th>
      <th scope="colgroup" colspan="2">Sıcaklık (°C)</th>
      <th scope="col" rowspan="2">Nem (%)</th>
    </tr>
    <tr>
      <th scope="col">En düşük</th>
      <th scope="col">En yüksek</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Pazartesi</th><td>-4</td><td>3</td><td>72</td></tr>
    <tr><th scope="row">Salı</th><td>-6</td><td>1</td><td>68</td></tr>
  </tbody>
</table>

Özet

• Tablo, hücrenin anlamının satır ve sütun başlıklarının kesişiminden çıktığı iki boyutlu veri içindir; sayfa düzeni için kullanılmaz.
• caption tabloyu adlandırır ve tabloya bağlıdır; üstüne yazılmış ayrı bir paragraf bu bağı kurmaz.
• th ile td arasındaki fark görünüm değil işlevdir; scope başlığın hangi yöndeki hücreleri adlandırdığını bildirir.
• colspan ve rowspan ile kaynak metindeki hücre sayısı ızgaradaki göz sayısından ayrılır; aynı hücre birden çok gözde görünür.
• Komşulukla çözülemeyen yapılarda headers ve id ile açık bağ kurulur; bakım maliyeti yüksek olduğu için önce tabloyu bölmek değerlendirilir.

Sonraki Adım

Bu konu belgenin iskeletini kurdu: kök yapı, söz dizimi, başlıklar, metin, listeler, bağlantılar ve tablolar. Belgede yazılanların her biri bir yapı bildirimidir, ancak bu bildirimler henüz belgenin bölümlerini adlandırmıyor: gezinme nerede bitiyor, ana içerik nerede başlıyor, alt bilgi hangisi? Sonraki konu bu soruyu yanıtlayan bölüm etiketlerini ele alır ve belgenin gezinme yapısını kurar.