HTML’de Tablo Oluşturma

Web sayfalarında verileri yapılandırılmış, okunabilir ve karşılaştırılabilir bir biçimde sunmanın en temel yolu tablolardır. Kullanıcı listeleri, finansal raporlar, teknik özellik listeleri ya da sunucu durum kayıtları gibi iki boyutlu veri kümeleri ekranda gösterilmek istendiğinde HTML tabloları devreye girer. Geçmişte tüm sayfa düzenini kurmak amacıyla yanlış bir biçimde kullanılan bu yapılar, günümüz modern web standartlarında yalnızca anlamsal veri gösterimi amacıyla tercih edilmektedir.

HTML Tablo Yapısının Temel Mantığı

HTML üzerinde bir tablo inşa etmek, satırlar ve sütunlardan oluşan bir matris kurmaya benzer. Tarayıcılar tabloyu yukarıdan aşağıya doğru, satır satır işler. Bu mimarinin anlaşılması için dört ana etiketin işlevini bilmek gerekir:

• table: Tüm tablo yapısını sarmalayan ve tarayıcıya bir tablonun başladığını bildiren ana kapsayıcıdır.
• tr: “Table row” ifadesinin kısaltmasıdır ve tablodaki yatay satırları temsil eder. Tabloya eklenecek her yeni veri satırı bu etiketle açılır.
• th: “Table header” anlamına gelir. Sütunların veya satırların başlıklarını tanımlar. Varsayılan olarak tarayıcılar tarafından kalın ve ortalanmış olarak gösterilir.
• td: “Table data” ifadesini temsil eder. Satır içindeki asıl veri hücrelerini oluşturur.

Temel Bir Tablo Örneği

En sade haliyle bir tablonun nasıl kurulduğunu görmek, yapının mantığını kavramayı kolaylaştırır. Aşağıdaki örnekte üç sütunlu ve iki satırlı basit bir kullanıcı listesi yer almaktadır:

<table>
  <tr>
    <th>First name</th>
    <th>Soyad</th>
    <th>Rol</th>
  </tr>
  <tr>
    <td>Yunus</td>
    <td>Kaytan</td>
    <td>Yönetici</td>
  </tr>
</table>

Yukarıdaki kod parçasında ilk olarak table etiketi ile alan tanımlanmıştır. İlk tr bloğu içinde üç adet th etiketi yer alır; bu etiketler tablonun başlık sütunlarını oluşturur. İkinci tr bloğunda ise bu başlıklara karşılık gelen td etiketleri kullanılarak veri hücreleri doldurulmuştur.

Tabloyu Anlamsal Olarak Yapılandırma

Küçük tablolarda yalnızca tr ve td kullanmak yeterli görünse de, büyük ve karmaşık veri kümelerinde tablonun anlamsal (semantik) olarak bölümlere ayrılması gerekir. HTML5 ile birlikte standartlaşan bu bölümler hem arama motorlarının tabloyu daha iyi anlamasını sağlar hem de ekran okuyucu kullanan görme engelli bireyler için erişilebilirliği artırır.

• thead: Tablonun başlık satırlarını barındıran üst bölümdür.
• tbody: Tablonun asıl içeriğini, yani veri satırlarını barındıran gövde bölümüdür.
• tfoot: Tablonun alt bilgi veya özet satırını barındıran bölümdür. Genellikle toplam değerler ya da dipnotlar için kullanılır.

Semantik Tablo Örneği

Aşağıdaki örnekte semantik etiketlerin hiyerarşik düzeni gösterilmektedir:

<table>
  <thead>
    <tr>
      <th>Sunucu Adı</th>
      <th>IP Adresi</th>
      <th>Durum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Web-01</td>
      <td>192.168.1.10</td>
      <td>Aktif</td>
    </tr>
    <tr>
      <td>DB-01</td>
      <td>192.168.1.20</td>
      <td>Aktif</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Toplam Sunucu</td>
      <td>2</td>
      <td>Sorunsuz</td>
    </tr>
  </tfoot>
</table>

Bu yapıda tarayıcı, thead alanının başlıkları, tbody alanının veri akışını, tfoot alanının ise sonuç satırını temsil ettiğini doğrudan kavrar. Uzun tablolarda sayfalandırma veya yazdırma işlemi yapıldığında tarayıcılar thead bölümünü her sayfanın başında otomatik olarak tekrar gösterebilir.

Hücreleri Birleştirme: colspan ve rowspan

Bazı durumlarda bir veri hücresinin birden fazla sütuna veya satıra yayılması gerekir. Bu işlem için td ve th etiketlerine uygulanan iki özel öznitelik kullanılır:

• colspan: Bir hücrenin yatayda kaç sütun genişliğinde olacağını belirler. “Column span” anlamına gelir.
• rowspan: Bir hücrenin dikeyde kaç satır boyunca uzanacağını belirler. “Row span” anlamına gelir.

Hücre birleştirme yapılırken dikkat edilmesi gereken en kritik kural, birleştirilen hücre adedi kadar diğer hücrelerin satırdan çıkarılması gerektiğidir. Aksi takdirde tablonun hizalaması bozulur ve hücreler sağa doğru kayar.

<table>
  <tr>
    <th>Kategori</th>
    <th>Protokol</th>
    <th>Port</th>
  </tr>
  <tr>
    <td rowspan="2">Ağ Güvenliği</td>
    <td>SSH</td>
    <td>22</td>
  </tr>
  <tr>
    <td>HTTPS</td>
    <td>443</td>
  </tr>
  <tr>
    <td>Genel Açıklama</td>
    <td colspan="2">Kritik yönetim servisleri</td>
  </tr>
</table>

Bu örnekte “Ağ Güvenliği” hücresi rowspan=”2″ değeri aldığı için iki satır boyunca dikey olarak uzanır. Bu nedenle bir sonraki satıra üçüncü bir hücre eklenmemiş, sadece iki hücre yazılmıştır. Son satırda ise colspan=”2″ kullanılarak tek bir hücre iki sütunluk genişliğe yayılmıştır.

CSS ile Tabloları Biçimlendirme

Ham HTML tabloları görsel açıdan oldukça ilkeldir; varsayılan olarak kenarlıkları dahi belirgin değildir. Tabloyu modern ve okunabilir hale getirmek için CSS kullanılır. Tablo tasarımında en sık ihtiyaç duyulan özellik border-collapse özelliğidir.

Tarayıcılar varsayılan olarak hücre sınırları arasında boşluk bırakır (ayrık kenarlık modeli). Kenarlıkları tek bir çizgide birleştirmek için border-collapse: collapse kuralı atanmalıdır.

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #cccccc;
  padding: 8px 12px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

tr:nth-child(even) {
  background-color: #fafafa;
}

Bu CSS kurallarının işlevleri şu şekildedir:

• border-collapse: collapse kuralı, çift kenarlık görüntüsünü ortadan kaldırarak şık ve tek bir çizgi oluşturur.
• padding özelliği hücre içeriği ile kenarlık arasına boşluk bırakarak verinin nefes almasını sağlar.
• text-align: left kuralı metinlerin sola dayalı düzenli durmasını sağlar.
• tr:nth-child(even) seçicisi çift numaralı satırlara açık gri bir arka plan rengi atayarak “zebra deseni” oluşturur ve satırların takibini kolaylaştırır.

Veri Güvenliği Açısından Tablolar

Bilişim ve güvenlik odaklı projelerde dinamik tablolar sıkça kullanılır. Veritabanından çekilen sistem logları veya kullanıcı girdileri tablo hücrelerine yazdırılırken güvenlik ihmal edilmemelidir.

Kullanıcıdan alınan veriler doğrudan td etiketleri arasına temizlenmeden (sanitize edilmeden) basılırsa, Siteler Arası Betik Çalıştırma (XSS) zafiyeti ortaya çıkabilir. Saldırgan, ad veya açıklama alanına JavaScript kodları yerleştirerek tablonun tarayıcıda işlendiği sırada bu kodların çalışmasını sağlayabilir. Bu nedenle tablo hücrelerine dinamik veri yazdırılırken HTML karakterlerinin mutlaka filtrelenmesi gerekir.

Erişilebilirlik ve En İyi Uygulamalar

Profesyonel bir web geliştirmede tabloların standartlara uygun olması için şu kurallara dikkat edilmelidir:

• caption etiketi kullanarak tablonun ne amaçla oluşturulduğunu belirten kısa bir başlık ekleyin. Bu etiket doğrudan table etiketinin hemen altına yazılır.
• th etiketlerinde scope özniteliğini kullanın. scope=”col” değeri başlığın bir sütuna, scope=”row” değeri ise bir satıra ait olduğunu yardımcı teknolojilere açıkça bildirir.
• Kesinlikle sayfa iskeletini veya düzenini kurmak için tablo kullanmayın; mizanpaj işlemleri için CSS Flexbox veya CSS Grid tercih edin.
• Mobil cihazlarda geniş tabloların taşmasını önlemek amacıyla tabloyu overflow-x: auto stiline sahip bir div kapsayıcısı içerisine alın.

Özet ve Sonraki Adımlar

HTML tabloları; table, tr, th ve td temel etiketleri üzerine kurulur. thead, tbody ve tfoot yapıları veriyi anlamsal bölümlere ayırırken; colspan ve rowspan öznitelikleri karmaşık ızgara düzenleri oluşturmanıza imkan tanır. CSS yardımıyla biçimlendirilen tablolar, kullanıcıya rahat bir okuma deneyimi sunar.

Tablo mimarisini kavradıktan sonraki adımda, ekran boyutuna göre şekil alan responsive tablo tasarımlarını inceleyebilir ve CSS Grid sistemi ile tablo yapıları arasındaki farkları öğrenerek sayfa düzeni tekniklerinizi geliştirebilirsiniz.