🧩 HTML Tablo Etiketi: Verileri Yapılandırmanın Anahtarı

HTML dünyasında bazı etiketler vardır…
Bağırmaz, çağırmaz, animasyon yapmaz ama veri geldi mi sahne onun olur.

İşte o etiket:

<table> 💼📊

Verinin Excel’i, düzenin bekçisi, “herkes yerine geçsin” diyen öğretmen tipi.

🤔 Tablo Nedir? Neden Hayat Kurtarır?

HTML tablo etiketi, anlamlı, ilişkili ve düzenli verileri satır–sütun mantığıyla göstermek için vardır.

Tablolar şunlar için idealdir:

• Öğrenci listeleri
• Ürün – fiyat karşılaştırmaları
• Ders programları
• Sipariş özetleri
• İstatistikler
• “Kim kaç kahve içmiş” tablosu ☕😄

❗ ALTIN KURAL
Tablo = Veri
Tasarım = CSS (Flexbox / Grid)

Tablodan layout çıkarmaya çalışırsan HTML seni sessizce yargılar.

🧱 Tablo Yapısının Anatomisi (İçini Açıyoruz)

Bir HTML tablosu aslında mini bir organizma gibidir.

🔹 Temel Yapı

<table>
  <tr>
    <td>Veri</td>
    <td>Veri</td>
  </tr>
</table>

Ama bu hâliyle tablo:

• Kimliksiz
• Başlıksız
• “Ben kimim?” krizinde

Şimdi bunu adam gibi yapalım.

👨‍👩‍👧‍👦 Tablo Etiketleri (Aile Tanıtımı)

<table>

➡ Tablonun kendisi
➡ Her şey bunun içinde olur

<tr> (Table Row)

➡ Satır
➡ Yatay ilerler

<td> (Table Data)

➡ Hücre
➡ Verinin yaşadığı yer

<th> (Table Header)

➡ Başlık hücresi
➡ Varsayılan olarak kalın & ortalıdır
➡ Erişilebilirlik için KRİTİKTİR

🧪 Pratik Örnek: Öğrenci Not Tablosu

<table>
  <tr>
    <th>Ad Soyad</th>
    <th>Bölüm</th>
    <th>Vize</th>
    <th>Final</th>
  </tr>
  <tr>
    <td>Cansu Porsuk</td>
    <td>Bilgisayar</td>
    <td>90</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Ali Yılmaz</td>
    <td>Yazılım</td>
    <td>80</td>
    <td>85</td>
  </tr>
</table>

🎯 Burada ne öğrendik?

• İlk satır başlık
• Diğer satırlar veri
• Tarayıcı tabloyu otomatik anlıyor

🎩 Profesyonel Seviye: <thead>, <tbody>, <tfoot>

Şimdi tabloya takım elbise giydiriyoruz.

<table>
  <thead>
    <tr>
      <th>Ürün</th>
      <th>Adet</th>
      <th>Fiyat</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Kahve</td>
      <td>2</td>
      <td>50₺</td>
    </tr>
    <tr>
      <td>Çikolata</td>
      <td>1</td>
      <td>30₺</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th colspan="2">Toplam</th>
      <th>80₺</th>
    </tr>
  </tfoot>
</table>

💡 Neden Önemli?

• Erişilebilirlik artar ♿
• Screen reader’lar tabloyu daha iyi okur
• JS ile tbody’yi dinamik güncellemek kolaylaşır
• SEO açısından anlamlı yapı oluşur

🧙 Hücre Birleştirme Sihri

colspan – Yan yana birleştir

<td colspan="3">Genel Toplam</td>

rowspan – Alt alta birleştir

<td rowspan="2">Pazartesi</td>

🧠 İpucu:
rowspan kullanıyorsan, alt satırdaki hücre sayısını azaltmayı unutma, yoksa tablo Matrix’e girer.

🎨 CSS Olmadan Tablo Olmaz (Gerçekler)

Minimal ama şık bir tablo stili:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
  }

  thead {
    background-color: #f5f5f5;
  }

  tbody tr:hover {
    background-color: #f0f8ff;
  }
</style>

✨ Artık tablon:

• Okunur
• Hover efekti var
• “Bunu junior yazmadı” hissi verir

📱 Responsive Tablo Tüyosu (Altın Değerinde)

Tablolar mobilde zorlar.
En basit çözüm:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

💡 Böylece:

• Taşma olmaz
• Yatay kaydırma gelir
• Kullanıcı sinir krizi geçirmez

♿ Erişilebilirlik (A11Y) İpuçları

<table>
  <caption>2025 Öğrenci Not Listesi</caption>

✔ <caption> tabloya anlam katar
✔ Screen reader’lar için altın değerinde
✔ SEO dostudur

🚨 En Sık Yapılan Tablo Günahları

❌ <table> ile sayfa tasarlamak
❌ Her şeyi <td> yapmak
❌ Başlıkları sadece kalın yapıp geçmek
❌ CSS’siz tablo bırakmak
❌ Mobilde test etmemek

HTML affeder… ama kullanıcı unutmaz 😄

❤️ Son Söz

HTML tablo etiketi:

• Veriyi disipline sokar
• Karmaşayı hizaya dizer
• Doğru kullanıldığında efsane,
• Yanlış kullanıldığında “kim yazdı bunu?” dedirtir

Eğer:

• Veri varsa → Tablo
• Tasarım varsa → Flexbox / Grid