CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Proje sonu - Veri tablosu

HTML kursu · Orta seviye · Ders 28/67

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:

  1. <caption>'dan sonra, <thead>'den önce bir <colgroup> ekle; içine dört <col> koy.
  2. <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

  1. 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.

  2. th hücresine colspan ekle

    <th scope="row" ____>Toplam</th>
    Cevabı göster 
    <th scope="row" colspan="2">Toplam</th>

  3. 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

Orta seviye bölümündeki tüm dersler

1 İleri metin etiketleri

  1. Abbr, cite ve time
  2. Code, kbd ve samp
  3. Sub ve sup
  4. Pre ve code bloğu
  5. Wbr ve bdi, bdo
  6. Özet - Teknik doküman

2 İleri bağlantılar

  1. Download bağlantıları
  2. Ping ve rel türleri
  3. Hreflang ve canonical
  4. Bağlantı erişilebilirliği
  5. Buton vs bağlantı
  6. Özet - Çok dilli menü

3 Proje: Landing sayfası

  1. Proje: Ürün landing sayfası
  2. Hero bölümü
  3. Özellik listesi
  4. Fiyat tablosu
  5. Proje sonu - Landing

4 İleri tablolar

  1. Col ve colgroup
  2. Scope ve headers
  3. Tablo erişilebilirliği
  4. Responsive tablolar
  5. Tablo görsel yapısı
  6. Özet - Karşılaştırma tablosu

5 Proje: Veri tablosu

  1. Proje: Veri tablosu
  2. Başlık ve caption
  3. Gövde verisi
  4. Toplam satırı
  5. Proje sonu - Veri tablosu

6 İleri form öğeleri

  1. Fieldset ve legend
  2. Datalist ve output
  3. Progress ve meter
  4. Input öznitelikleri
  5. Autocomplete ve inputmode
  6. Özet - Anket formu

7 Form doğrulama

  1. Required ve pattern
  2. Min, max ve step
  3. Minlength ve maxlength
  4. Type-based doğrulama
  5. Novalidate ve formnovalidate
  6. Özet - Kayıt formu doğrulama

8 Proje: İletişim formu

  1. Proje: İletişim formu
  2. Form iskeleti
  3. Kişi alanları
  4. Mesaj ve konu
  5. Proje sonu - İletişim formu

9 Anlamsal düzen

  1. Header yapısı
  2. Ana içerik
  3. Sidebar ve aside
  4. Footer yapısı
  5. Bölümleme kuralları
  6. Özet - Magazin sayfası

10 Erişilebilirlik temelleri

  1. ARIA temelleri
  2. Saklı başlık
  3. Skip link
  4. Form erişilebilirliği
  5. Tablo erişilebilirliği
  6. Özet - Erişilebilir kart

11 Proje: Site iskeleti

  1. Proje: Çok sayfalı site iskeleti
  2. Tutarlı header/footer
  3. Ana sayfa
  4. Hakkında ve iletişim
  5. Proje sonu - Site iskeleti

12 Orta seviye finali

  1. Meydan okuma - İleri metin
  2. Meydan okuma - Erişilebilir tablo
  3. Meydan okuma - Doğrulamalı form
  4. Meydan okuma - Anlamsal düzen
  5. Meydan okuma - Orta seviye projesi