Proje sonu - Veri tablosu

Tabloyu colgroup ve erişilebilirlik öznitelikleriyle tamamlayıp dokümante edersin.

Sütun düzeni: colgroup ve col

colgroup bir veya birden fazla sütunu gruplamak için kullanılır; içine col etiketleri konur. Her col bir sütunu temsil eder. Bu, sütun genişlikleri veya stilleri için ortak bir kanal sağlar. colgroup, caption'dan sonra ve thead'den önce yer alır. Bu derste dört sütun için dört col ekleyeceğiz.

Hücre birleştirme: colspan ve rowspan

colspan bir hücrenin yatayda kaç sütun kaplayacağını, rowspan ise dikeyde kaç satır kaplayacağını söyler. Örneğin colspan="2" iki sütunu birleştirir. Daha karmaşık tablolarda headers özniteliği ile hücreleri başlık kimliklerine bağlayabilirsin; ama basit tablolarda scope yeterlidir. Bu derste colspan ile toplam hücresini birleştireceğiz.

Uygulama colgroup ekle ve toplam hücresini colspan ile birleştir

Önceki dersin tablosunu al. İki değişiklik yap:

<caption>'dan sonra, <thead>'den önce bir <colgroup> ekle; içine dört <col> koy.
<tfoot>'taki <th scope="row">Toplam</th> hücresine colspan="2" ekle ve hemen ardından gelen — içeren <td>'yi kaldır. Böylece "Toplam" iki sütunu (Ay ve Ürün) birleştirir; satırda th + iki td kalır.

Ö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>
      <colgroup>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <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>
      <tbody>
        <tr>
          <th scope="row">Ocak</th>
          <td>Kulaklık</td>
          <td>320</td>
          <td>₺32,000</td>
        </tr>
        <tr>
          <th scope="row">Şubat</th>
          <td>Kale</td>
          <td>280</td>
          <td>₺28,000</td>
        </tr>
        <tr>
          <th scope="row">Mart</th>
          <td>Klavye</td>
          <td>410</td>
          <td>₺41,000</td>
        </tr>
        <tr>
          <th scope="row">Nisan</th>
          <td>Fare</td>
          <td>440</td>
          <td>₺44,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" colspan="2">Toplam</th>
          <td>1,450</td>
          <td>₺145,000</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Proje tamamlandı

Proje tamamlandı! Elinde şimdi tam bir erişilebilir veri tablosu var:

caption, colgroup, thead, tbody, tfoot bölümleri
tüm th hücrelerinde scope
colspan ile birleştirilmiş toplam hücresi
colgroup ile sütun düzeni

Bu yapıyı gerçek raporlarda, finansal özetlerde ve karşılaştırma tablolarında kullanabilirsin. Erişilebilir tasarım sadece ekran okuyucu kullananlar için değil, herkes için daha net bir tablo demektir.

Kendini test et

colgroup tablo içinde nereye gelir?
- caption'dan önce
- caption'dan sonra, thead'den önce
- tbody'den sonra, tfoot'tan önce
- </table>'den sonra
Cevabı göster

caption'dan sonra, thead'den önce — Doğru. colgroup caption'dan sonra ve thead'den önce yer alır.

th hücresine colspan ekle

<th scope="row" ____>Toplam</th>

Cevabı göster

<th scope="row" colspan="2">Toplam</th>

Tablo özniteliğini amacıyla eşleştir

scope

Hücre kapsamı
colspan

Sütun birleştirme
rowspan

Satır birleştirme
headers

Hücre-header ilişkisi

Sıradaki ders: Fieldset ve legend

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler