---
title: Tablolar
source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/tablolar'
course: "Web'in Temelleri ve HTML"
language: tr
updated: '2026-08-17T18:09:31+00:00'
license: 'CC BY-SA 4.0'
---

# Tablolar

Tablo ögelerinin yapısı, başlık hücrelerinin kapsamı, ızgaranın colspan ve rowspan ile kurulması ve bir veri hücresinin başlıklarının hesaplanması.

Ö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ı

```html
<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.

```js
// 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:

```html
<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.

```html
<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

```html
<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.