Bootstrap Tablolar (Tables)

Web sitenizde verileri, istatistikleri, kullanıcı listelerini veya ürün karşılaştırmalarını düzenli bir şekilde sunmanın en iyi yolu tabloları kullanmaktır. Ancak, saf HTML ile oluşturulan standart bir tablo görsel olarak genellikle oldukça zayıftır ve mobil cihazlarda ekranın dışına taşarak arama motoru optimizasyonu (SEO) açısından (mobil uyumluluk kriteri) sitenize zarar verebilir.

İşte bu noktada Bootstrap Tables (Tablolar) devreye girer. Bootstrap 5, sıkıcı HTML tablolarını yalnızca tek bir sınıf (class) ekleyerek modern, şık ve her cihaza tam uyumlu (responsive) hale getirmenizi sağlar. Bu rehberde, Bootstrap ile tablo oluşturmanın temellerini, görsel varyasyonlarını ve Bootstrap 5 sürümüyle birlikte gelen harika yenilikleri örneklerle öğreneceğiz.

1. Temel Tablo Oluşturma (Basic Table)

Bootstrap ile harika bir tablo oluşturmak için ihtiyacınız olan tek şey, standart HTML <table> etiketine .table sınıfını eklemektir. Bu sihirli sınıf, tablonuza otomatik olarak hafif bir iç boşluk (padding), şık yatay ayırıcı çizgiler ve modern bir tipografi kazandırır.

Ayrıca, erişilebilirlik (accessibility) ve SEO açısından, tablo başlıklarında (<th>) scope="col" niteliğini (attribute) kullanmak, ekran okuyucu kullanan engelli bireyler için verilerin daha iyi anlaşılmasını sağlar.

Örnek Temel Tablo:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Ad</th>
      <th scope="col">Soyad</th>
      <th scope="col">Meslek</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ahmet</td>
      <td>Yılmaz</td>
      <td>Yazılım Geliştirici</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Ayşe</td>
      <td>Kaya</td>
      <td>Grafik Tasarımcı</td>
    </tr>
  </tbody>
</table>

2. Tablo Renkleri ve Temaları

Sitenizin kurumsal renklerine veya verinin taşıdığı anlama göre (örneğin başarılı bir işlem için yeşil, hatalı bir işlem için kırmızı) tablolarınızı renklendirebilirsiniz.

Önemli Bir Yenilik: Bootstrap 4’te tablo başlıklarını renklendirmek için kullandığımız .thead-light ve .thead-dark sınıfları Bootstrap 5 ile kaldırılmıştır. Bunun yerine, tabloya, tablo başlığına (<thead>), satırlara (<tr>) veya tek bir hücreye (<td>) doğrudan .table-* (örneğin .table-primary, .table-dark) varyasyon sınıflarını uygulayabilirsiniz.

Örnek Renkli Tablo Kullanımı:

<!-- Tüm tabloyu koyu tema (Dark Mode) yapar -->
<table class="table table-dark">
  <!-- Yalnızca başlık kısmını mavi (primary) yapar -->
  <thead class="table-primary">
    <tr>
      <th scope="col">Ürün Adı</th>
      <th scope="col">Stok Durumu</th>
    </tr>
  </thead>
  <tbody>
    <!-- Yalnızca bu satırı yeşil (success) yapar -->
    <tr class="table-success">
      <td>Dizüstü Bilgisayar</td>
      <td>Stokta Var</td>
    </tr>
    <!-- Yalnızca bu satırı kırmızı (danger) yapar -->
    <tr class="table-danger">
      <td>Akıllı Telefon</td>
      <td>Tükendi</td>
    </tr>
  </tbody>
</table>

3. Çizgili (Striped) ve Vurgulu (Hover) Tablolar

Büyük veri setlerinin okunabilirliğini artırmak iyi bir kullanıcı deneyimi (UX) sunar ve kullanıcıların sitenizde daha uzun süre kalmasını sağlayarak SEO’nuza dolaylı katkıda bulunur.

• Zebra Deseni (Striped Rows): Satırların bir açık, bir koyu renkte (zebra deseni) ardışık olarak listelenmesi için .table-striped sınıfını kullanabilirsiniz.
• Sütun Çizgileri (Striped Columns): Bootstrap 5.2 sürümü ile birlikte hayatımıza giren yepyeni bir özellikle, artık sadece satırları değil, sütunları da .table-striped-columns sınıfı ile ardışık renkli hale getirebilirsiniz.
• Vurgulama (Hover Effect): Kullanıcı faresini bir satırın üzerine getirdiğinde o satırın renginin hafifçe değişip vurgulanması için .table-hover sınıfı eklenir.

<!-- Hem satırları zebra desenli hem de üzerine gelince vurgulanan tablo -->
<table class="table table-striped table-hover">
  <!-- Tablo içeriği... -->
</table>

<!-- Yeni özellik: Sütunları zebra desenli yapan tablo -->
<table class="table table-striped-columns">
  <!-- Tablo içeriği... -->
</table>

4. Kenarlıklı (Bordered) ve Kenarlıksız (Borderless) Tablolar

Tasarım tercihlerinize göre tablonuzun kenarlıklarını (border) yönetmek çok basittir:

• Tablonun dışına ve hücrelerin arasına belirgin çizgiler çekmek için .table-bordered sınıfı kullanılır. Genellikle karmaşık Excel benzeri veri sunumlarında tercih edilir.
• Tam tersine, daha temiz, minimalist ve “flat” bir tasarım istiyorsanız, tablodaki tüm çizgileri kaldıran .table-borderless sınıfını kullanabilirsiniz.

5. Tablo Grubu Bölücüleri (Table Group Dividers)

Bootstrap 5.2 sürümü ile gelen bir diğer estetik yenilik ise tablo grupları arasındaki kalın ayrım çizgisidir. Önceden bu kalın çizgi varsayılan olarak gelirken ve CSS ile ezmek zor olurken, artık isteğe bağlı (opt-in) hale getirilmiştir.

Tablo başlığı (<thead>) ile tablo gövdesi (<tbody>) arasına daha belirgin ve kalın bir çizgi çekmek için, <tbody> etiketine .table-group-divider sınıfını eklemeniz yeterlidir.

<table class="table">
  <thead>
    <tr>...</tr>
  </thead>
  <tbody class="table-group-divider">
    <!-- Bu kısmın üstünde kalın ve belirgin bir ayırıcı çizgi görünür -->
    <tr>...</tr>
  </tbody>
</table>

6. SEO ve Mobil Uyumluluk İçin Hayati Önlem: Duyarlı Tablolar (Responsive Tables)

Söz konusu tablolar olduğunda, web tasarımcıların en büyük kabusu geniş verilerin cep telefonu ekranlarına sığmamasıdır. Tablonuz ekran dışına taşarsa, Google bunu bir “Mobil Kullanılabilirlik Hatası” olarak algılar ve SEO puanınızı düşürür.

Bootstrap, bu sorunu harika bir şekilde çözer. Tablonuzu <div class="table-responsive"> sınıfına sahip bir kapsayıcı (container) içine alırsanız, tablonuz büyük ekranlarda normal görünürken, cep telefonu gibi dar ekranlarda kendi içinde yatay olarak kaydırılabilir (scrollable) hale gelir. Sayfanın genel düzeni kesinlikle bozulmaz.

<!-- Sayfa yapısını bozmayan, yatay kaydırma çubuğuna sahip duyarlı tablo -->
<div class="table-responsive">
  <table class="table">
    <!-- Çok fazla sütuna sahip geniş tablo içeriği... -->
  </table>
</div>

İpucu: Eğer tablonun sadece belirli bir ekran boyutunun altında (örneğin 768px altı) kaydırılabilir olmasını isterseniz .table-responsive-md gibi kırılma noktasına (breakpoint) özel duyarlı sınıflar da kullanabilirsiniz.

7. İleri Seviye Özellikler: İç İçe Tablolar ve CSS Değişkenleri

Bootstrap 5’in arka planında yaptığı büyük mimari değişikliklerden tablolar da nasibini almıştır:

• CSS Değişkenleri (CSS Variables): Bootstrap 5 tabloları baştan aşağı yeniden tasarlanmış ve renklerin, boşlukların çok daha rahat kontrol edilebilmesi için CSS değişkenleri üzerine inşa edilmiştir.
• İç İçe Tablolar (Nesting): Önceki sürümlerde bir tablonun içine başka bir tablo eklediğinizde, içteki tablo dıştakinin renklerini ve stillerini miras (inherit) alırdı ve bu karmaşaya yol açardı. Bootstrap 5 ile birlikte iç içe geçmiş (nested) tablolar artık dış tablonun stillerini miras almaz. Yani her tabloyu kendi içinde bağımsız olarak stillendirebilirsiniz.

Özetle

Bootstrap 5 Tablo bileşenleri, veri sunumunu hem siz geliştiriciler için basit hem de web sitenizin ziyaretçileri için anlaşılır ve estetik bir hale getirir. İster karanlık mod (dark mode) paneller oluşturun, ister renk kodlu analiz raporları sunun; .table, .table-striped, .table-hover ve .table-responsive gibi son derece akılda kalıcı sınıflarla SEO uyumlu, mobil cihaz dostu harika arayüzleri sadece dakikalar içinde hazırlayabilirsiniz. Öğrendiğiniz bu sınıfları kendi projelerinizde test ederek veri görselleştirme becerilerinizi anında bir üst seviyeye taşıyabilirsiniz!