Web geliştirme yolculuğunuzda metinleri nasıl biçimlendireceğinizi ve listeleri nasıl oluşturacağınızı öğrendiniz. Peki ya bir ürün karşılaştırma listesi, bir maç fikstürü, finansal bir rapor veya bir ders programı yayınlamanız gerekirse? Karmaşık verileri düzenli, okunabilir ve hizalı bir şekilde sunmanın en iyi yolu HTML Tablolar (Tables) kullanmaktır.
Bu kapsamlı rehberde, HTML tablolarının nasıl oluşturulduğunu, satır ve sütun mantığının nasıl işlediğini ve modern web dünyasında “Semantik (Anlamsal)” tabloların SEO ve erişilebilirlik açısından neden bu kadar hayati bir öneme sahip olduğunu adım adım, bol örneklerle öğreneceksiniz.
1. HTML Tablolarının Temel Yapı Taşları
HTML’de bir tablo oluşturmak, bir Excel veya Google Sheets elektronik tablosu oluşturmaya benzer. Ancak burada hücreleri farenizle çizmek yerine etiketler (tags) kullanarak tanımlarsınız. Her tablo satır satır (row by row) inşa edilir.
Bir tablonun iskeletini oluşturmak için dört temel etikete ihtiyacımız vardır:
<table>: Tablonun kendisini tanımlayan ve tüm tablo verilerini kapsayan ana etikettir.<tr>(Table Row): Tablodaki yatay bir satırı temsil eder. Tabloya ekleyeceğiniz her yeni satır için yeni bir<tr>açmanız gerekir.<th>(Table Heading): Tablonun başlık hücrelerini tanımlar. Bu etiket içine yazılan metinler, tarayıcılar tarafından varsayılan olarak kalın (bold) ve hücrenin ortasına hizalanmış olarak gösterilir.<td>(Table Data): Tablonun standart veri hücrelerini oluşturur. İçeriğinizin asıl yer aldığı,<tr>satırlarının içine yerleştirilen kutucuklardır.
Örnek 1: Temel Bir Tablo Oluşturma
Aşağıdaki örnekte, 3 sütunlu (Ad, Soyad, Meslek) ve bir başlık satırı dahil toplam 3 satırdan oluşan basit bir HTML tablosu görebilirsiniz:
<table border="1">
<tr>
<th>Ad</th>
<th>Soyad</th>
<th>Meslek</th>
</tr>
<tr>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>Mühendis</td>
</tr>
<tr>
<td>Ayşe</td>
<td>Demir</td>
<td>Öğretmen</td>
</tr>
</table>
Not: border="1" niteliği, hücre sınırlarını görsel olarak görmenizi sağlamak için eklenmiştir ancak modern HTML5 standartlarında kenarlık ve görsellik işlemleri HTML ile değil, CSS ile yapılmalıdır.
2. Semantik Tablo Yapısı: Gelişmiş Etiketler
Basit veriler için yukarıdaki yapı yeterlidir. Ancak yüzlerce satırlık bir satış raporu oluşturduğunuzu düşünün. Arama motorlarının (Google botları) ve ekran okuyucu kullanan görme engelli bireylerin bu devasa verinin neresinin başlık, neresinin ana veri, neresinin ise dipnot/toplam olduğunu anlaması zordur.
İşte bu noktada HTML5’in gelişmiş semantik (anlamsal) tablo etiketleri devreye girer:
<caption>: Tablonun ne hakkında olduğunu açıklayan genel başlığıdır. Bir tablonun hemen üstüne<p>ile başlık yazmak yerine<caption>kullanmak, o metnin doğrudan tabloya ait olduğunu tarayıcıya bildirir. Sadece bir adet kullanılmalıdır ve<table>etiketinden hemen sonra yazılmalıdır.<thead>: Tablonun üst başlık (sütun isimleri) grubunu sarmalar.<tbody>: Tablonun ana veri gövdesini (satırlarını) sarmalar.<tfoot>: Tablonun alt bilgi veya özet grubunu sarmalar (Örneğin, “Toplam Fiyat” veya “Ortalama Değer” satırı).
Örnek 2: Semantik ve Profesyonel Tablo
<table>
<caption>Aylık Şirket Giderleri Raporu</caption>
<thead>
<tr>
<th>Gider Kalemi</th>
<th>Açıklama</th>
<th>Tutar</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kira</td>
<td>Ofis aylık kira bedeli</td>
<td>15.000 TL</td>
</tr>
<tr>
<td>Faturalar</td>
<td>Elektrik, su, internet</td>
<td>3.500 TL</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Toplam</th>
<td>-</td>
<td>18.500 TL</td>
</tr>
</tfoot>
</table>
Bu semantik yapı, yazıcıdan bir sayfa çıktı aldığınızda veya tablo çok uzun olup kaydırıldığında (scroll), tarayıcının <thead> (başlık) ve <tfoot> (alt bilgi) satırlarını her sayfanın veya görünümün tepesinde/altında sabit tutmasına (tarayıcı desteğine bağlı olarak) olanak tanır.
3. Hücreleri Birleştirme (Spanning Cells)
Excel’de iki veya daha fazla hücreyi birleştirip tek bir dev hücre haline getirmeyi sıkça kullanırız. HTML tablolarında bu işlem colspan (sütun birleştirme) ve rowspan (satır birleştirme) nitelikleri (attributes) kullanılarak yapılır.
colspan="sayı": Bir hücrenin yatay eksende kaç sütun boyunca uzayacağını belirtir.rowspan="sayı": Bir hücrenin dikey eksende kaç satır boyunca aşağıya uzayacağını belirtir.
Örnek 3: Hücre Birleştirme Kullanımı
<table border="1">
<tr>
<th colspan="2">Öğrenci İletişim Bilgileri</th> <!-- 2 Sütunu Kaplar -->
</tr>
<tr>
<td>Ali Yılmaz</td>
<td>[email protected]</td>
</tr>
<tr>
<td rowspan="2">Ayşe Demir</td> <!-- 2 Satırı Aşağıya Doğru Kaplar -->
<td>[email protected]</td>
</tr>
<tr>
<td>[email protected]</td> <!-- Bu satırda sadece 1 <td> var, çünkü sol tarafı üstteki hücre doldurdu -->
</tr>
</table>
Hücreleri birleştirirken her zaman birleştirilen sayıyı hesaba katmalısınız. Örneğin bir satırda normalde 3 hücreniz () varsa ve ilk hücrenize colspan="2" verdiyseniz, o satıra sadece 1 tane daha <td> eklemelisiniz (2+1 = 3). Eğer fazladan <td> eklerseniz, tablonuzun tasarımı sağdan dışarı taşarak bozulacaktır.
4. Tablolarda Erişilebilirlik (A11y) ve SEO Kuralları
Günümüz web dünyasında içerik üretirken sadece sağlıklı bireyleri düşünmek büyük bir hatadır. Görme engelli kullanıcılar, web sitelerini ekran okuyucu (screen reader) programlar aracılığıyla ziyaret ederler. Ekran okuyucu bir tabloya geldiğinde düz bir metin gibi dümdüz okumaya kalkarsa hiçbir anlam ifade etmez. Cihaz, hangi verinin hangi başlığa ait olduğunu kullanıcıya fısıldamak zorundadır.
scope Niteliğinin Önemi: Erişilebilirliği artırmak için, başlık hücrelerimize (<th>) scope niteliğini eklemeliyiz. Bu özellik ekran okuyucuya, bu başlığın bir sütun mu yoksa bir satır başlığı mı olduğunu belirtir.
scope="col": Bu hücrenin bir sütun (column) başlığı olduğunu belirtir.scope="row": Bu hücrenin bir satır (row) başlığı olduğunu belirtir.
Ayrıca, daha önce bahsettiğimiz <caption> kullanımı, kullanıcının o tabloyu okumaya zaman harcayıp harcamayacağına karar vermesi için eşsiz bir özet sunar. Bu semantik bağlar, arama motorlarının (SEO) içeriğinizin ilişkisel verisini “Zengin Sonuçlar (Rich Snippets)” olarak Google aramalarında çıkarmasına da yardımcı olur.
5. Asla Yapılmaması Gereken Büyük Hata: Sayfa Düzeni İçin Tablo Kullanmak
Web geliştirme dünyasının en eski (ve en kötü) alışkanlıklarından birine karşı sizi uyararak bitirelim. 1990’lı yılların sonu ve 2000’lerin başında, modern CSS teknolojileri henüz gelişmemişken, web tasarımcıları sitenin sağ menüsünü, sol menüsünü, tepesini ve altını yerleştirmek (layout oluşturmak) için gizli kenarlıklı (border="0") devasa HTML tabloları kullanırlardı.
Modern (2026 yılı) web standartlarında sayfa iskeleti (layout) kurmak için <table> kullanmak kesinlikle yasaktır ve büyük bir SEO ve erişilebilirlik hatasıdır. Görme engelliler için üretilen bir ekran okuyucu veya Google botu, tasarımınızda gezinirken karmaşık tablolar gördüğünde içeriğin hiyerarşisini anlayamaz. Tablolar, adı üzerinde, sadece ve sadece “Tablolanmış yapısal veriler (sayılar, programlar, raporlar vb.)” sunmak için kullanılmalıdır. Web sitenizin genel tasarımı, yan yana duran kutular, menüler ve resim galerileri için CSS Flexbox veya CSS Grid gibi modern CSS düzen teknolojilerini kullanmalısınız.
Kısa Bir CSS İpucu
Sadece HTML ile oluşturduğunuz bir tablo, görsel olarak hücreler arasında boşluklar olan, sıkıcı ve çizgisiz bir metin kümesi gibi görünür. Tablonuzdaki o eski tip çift çizgili kenarlıkları profesyonel tek çizgi haline getirmek için CSS’in mucizevi özelliği border-collapse: collapse; kullanılır. HTML dosyanızın <head> bölümüne veya harici CSS dosyanıza şu ufak kodu ekleyerek harika görünen tablolara sahip olabilirsiniz:
table {
border-collapse: collapse; /* Çift kenarlıkları tek bir kenarlıkta birleştirir */
width: 100%; /* Tablonun ekranı kaplamasını sağlar */
}
th, td {
border: 1px solid #dddddd; /* Hücrelere gri bir kenarlık ekler */
padding: 8px; /* Hücre içindeki yazının kenarlara yapışmasını engeller */
text-align: left; /* Metni sola hizalar */
}
th {
background-color: #f2f2f2; /* Başlık satırına hafif gri bir arka plan verir */
}
Özetle, <table>, <tr>, <th> ve <td> dörtlüsünün mantığını kavradığınızda, dünyadaki her türlü istatistiki veya kategorik veriyi web sitenize kolayca entegre edebilirsiniz. SEO gücünüzü artırmak içinse <thead>, <tbody> ve <caption> gibi semantik yardımcılarınızı asla kodunuzdan eksik etmeyin!
