🚀 HTML Tables: Verinin Hiyerarşisi ve Düzenli Yapılar

Veriyi Hizaya Sokmak: Tablo Anatomisi

Selamlar gençler. Bugün web geliştirmenin en eski ama en sağlam yapılarından birine, HTML Tablolarına bakıyoruz. Modern web dünyasında artık sayfayı komple tablolarla tasarlamıyoruz (90'larda öyleydi, tam bir kabustu), ancak liste verilerini, istatistikleri veya karşılaştırmaları sunmak için hala en iyi yöntem bu.

Tablo yapısı tamamen bir hiyerarşi üzerine kuruludur. Mantığı kavradığınızda bir Excel sayfasından farkı olmadığını göreceksiniz:

  1. <table>: Tablonun sınırlarını belirleyen ana kapsayıcı.
  2. <tr> (Table Row): Tablodaki her bir yatay satırı temsil eder.
  3. <th> (Table Header): Satırın veya sütunun başlığıdır. Tarayıcı bunu varsayılan olarak kalın ve ortalanmış gösterir. Semantik olarak 'bu sütun neyi anlatıyor?' sorusunun cevabıdır.
  4. <td> (Table Data): Tablonun en küçük birimi olan hücrelerdir. Verinin kendisi burada yaşar.

Biz Ovid Game çatısı altında geliştirdiğimiz Car Crasher projesinin skor tablosunu (leaderboard) hazırlarken, esneklik adına CSS Grid kullansak da, verinin ham halini ve tarayıcıya 'bu bir tablodur' mesajını en temiz yoldan iletmek için her zaman bu temel hiyerarşiyi referans alıyoruz. Semantik tablo yapısı, özellikle ekran okuyucular için verinin anlamlandırılmasında hayati rol oynar.

🚀 Sanal Kodlama Alanı Yükleniyor...

Teknik Detaylar ve border-collapse

Kod panelinde fark ettiyseniz CSS tarafında border-collapse: collapse; özelliğini kullandık. Eğer bunu yapmazsak, tarayıcı her hücrenin etrafına ayrı bir kenarlık çizer ve tablo 'çift çizgili' görünür. Bu, tabloların en klasik stil hilesidir.

Dikkat Edilmesi Gerekenler:

  • Semantik Ayrım: Başlıklar için mutlaka <th> kullanın. Bu hem tarayıcı stili hem de SEO için önemlidir.
  • Hücre Boşlukları: Hücrelerin içeriğinin nefes alması için padding kullanmayı unutmayın.
  • Mobil Uyumluluk: Tablolar doğası gereği esnek değildir. Çok fazla sütun eklediğinizde küçük ekranlarda taşma yapabilirler. Bu yüzden büyük tabloları yönetirken ileride öğreneceğimiz 'Responsive' tekniklerini kullanacağız.

Bir sonraki derste, tabloların içini daha da detaylandıracağımız <thead>, <tbody> ve hücre birleştirme (colspan/rowspan) gibi ileri seviye konulara bakacağız. Veri setinizi hazırlayın!

Geliştirici İmzası: ovidgame.com