Bootstrap Tablo Sınıfları: Striped, Hover, Bordered ve Responsive

Neden .table sınıfı gerekiyor?

Bootstrap tabloları "isteğe bağlı" (opt-in) olarak tasarlar: <table> ögesine dokunmaz, stiller yalnızca .table sınıfı verildiğinde uygulanır. Belgenin gerekçesi, takvim ve tarih seçici gibi üçüncü taraf bileşenlerin tabloları yaygın biçimde kullanmasıdır; tüm tablolara genel stil verilseydi bu bileşenlerin görünümü bozulurdu. Temel sınıf tabloya tam genişlik, alt boşluk, hücre iç boşluğu ve satırlar arasında ince ayırıcı çizgiler verir:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Alan adı</th>
      <th scope="col">Paket</th>
      <th scope="col">Bitiş</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>ornek.com.tr</td>
      <td>Başlangıç</td>
      <td>12.03.2027</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>magaza.com</td>
      <td>Profesyonel</td>
      <td>05.09.2027</td>
    </tr>
  </tbody>
</table>

Örnekte başlık hücrelerinin scope="col", satır başı hücrelerinin scope="row" taşıması resmî örneklerle aynıdır; bu öznitelikler hücrelerin hangi satıra ya da sütuna ait olduğunu yardımcı teknolojilere bildirir. Bootstrap'in kendisi bunları zorunlu kılmaz, ancak erişilebilir bir tablo için önemlidir. Konu erişilebilirlik yazısında daha geniş ele alınıyor.

Renk varyantları

Tema renklerinin her biri için bir tablo varyantı vardır: .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light ve .table-dark. Belgeye göre bu sınıflar tablonun kendisine, bir satıra ya da tek bir hücreye (td veya th) verilebilir. Açık ve koyu dışındaki varyantlar tema renginin çok açık bir tonunu kullanır; örneğin 5.0.2 derlenmiş CSS dosyasında .table-primary zemini #cfe2ff, .table-success zemini #d1e7dd değerindedir.

<table class="table">
  <tbody>
    <tr class="table-success">
      <td>Fatura 1042</td>
      <td>Ödendi</td>
    </tr>
    <tr class="table-warning">
      <td>Fatura 1043</td>
      <td>Bekliyor</td>
    </tr>
    <tr>
      <td>Fatura 1044</td>
      <td class="table-danger">Gecikti</td>
    </tr>
  </tbody>
</table>

<table class="table table-dark">
  <tbody>
    <tr>
      <td>Koyu tablo</td>
      <td>.table-dark</td>
    </tr>
  </tbody>
</table>

Renklerin tek başına anlam taşımadığını burada da hatırlamak gerekir: "Gecikti" yazısı hücrenin kırmızı olmasından bağımsız olarak durumu anlatır. Belge, renk ile verilen bilginin görünür metinden anlaşılmasını ya da .visually-hidden ile gizlenmiş ek metinle verilmesini önerir. Tema renklerinin kendisi renk sınıfları yazısında anlatılıyor.

Zebra, vurgu ve etkin satırlar

Üç "vurgu" sınıfı vardır. .table-striped gövdedeki (tbody) tek numaralı satırlara hafif bir ton ekler. .table-hover fare üzerine geldiğinde gövde satırını vurgular. .table-active ise tek bir satırı ya da hücreyi kalıcı olarak öne çıkarır. Bu sınıflar birbirleriyle ve renk varyantlarıyla birleştirilebilir; belge table table-dark table-striped ve table table-striped table-hover gibi örnekler verir. Kenarlık tarafında .table-bordered tablonun ve hücrelerin her yanına çizgi koyar, rengini .border-primary gibi kenarlık renk sınıflarıyla değiştirebilirsiniz; .table-borderless ise tüm ayırıcıları kaldırır. .table-sm hücre iç boşluğunu yarıya indirir: .5rem yerine .25rem.

<table class="table table-striped table-hover table-sm">
  <thead>
    <tr>
      <th scope="col">Sunucu</th>
      <th scope="col">Durum</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>web-01</td><td>Çalışıyor</td></tr>
    <tr><td>web-02</td><td>Çalışıyor</td></tr>
    <tr class="table-active"><td>db-01</td><td>Bakımda</td></tr>
    <tr><td>db-02</td><td>Çalışıyor</td></tr>
  </tbody>
</table>

<table class="table table-bordered border-primary">
  <tbody>
    <tr><td>Kenarlıklı</td><td>Birincil renkli çizgiler</td></tr>
  </tbody>
</table>

<table class="table table-borderless">
  <tbody>
    <tr><td>Kenarlıksız</td><td>Satır ayırıcıları yok</td></tr>
  </tbody>
</table>

Koyu tabloda vurgular ters yönde çalışır. Derlenmiş CSS'te .table-dark zemini #212529, zebra tonu #2c3034, vurgu tonu #323539, etkin tonu ise #373b3e olarak tanımlıdır ve metin rengi beyazdır. Yani koyu tabloda zebra ve vurgu satırları zeminden biraz daha açık görünür. Açık renk varyantlarında ise bu tonlar zeminden biraz daha koyudur ve metin siyaha döner. Bu tonları elle seçmeniz gerekmez; hepsi derleme sırasında varyantın kendi renginden hesaplanır.

Vurgular nasıl çalışıyor? CSS değişkenleri ve iç gölge

Belge, vurgulu tabloların tüm renk varyantlarıyla uyumlu çalışması için kullanılan tekniği ayrıca açıklar. Önce her hücrenin zemini --bs-table-bg değişkeninden alınır; renk varyantları yalnızca bu değişkeni değiştirir. Ardından hücreye box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); biçiminde dev yayılımlı, bulanıklıksız bir iç gölge eklenir. Bu gölge zemin renginin üstüne tek tip bir renk katmanı serer. --bs-table-accent-bg varsayılanda saydamdır; zebra, vurgu ve etkin sınıfları bu değişkeni yarı saydam bir renge çevirir. Bootstrap 5.0.2 derlenmiş CSS dosyasında temel kurallar şöyledir:

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #212529;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #212529;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #212529;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-color: #dee2e6;
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}

/* (kısaltıldı) */

.table-striped > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

Bu yaklaşımın pratik faydası şudur: renk varyantı kendi vurgu tonlarını da tanımlar. Örneğin derlenmiş CSS'te .table-success zemini #d1e7dd, etkin tonu #bcd0c7, zebra tonu #c7dbd2 olarak verilir; bu satıra .table-active eklediğinizde satır griye değil, yeşilin biraz daha koyu bir tonuna döner. Her varyant için vurgu rengi o rengin kontrastına göre ayrıca hesaplanır; belgeye göre .table-primary için vurgu daha koyu, .table-dark için daha açıktır. Kendi CSS'inizle bir hücrenin zeminini değiştirmek istediğinizde de background-color yerine --bs-table-bg değişkenini ezmek, vurgu sınıflarıyla uyumu korur. CSS değişkenlerinin mantığı için CSS değişkenleri rehberine bakabilirsiniz.

Dikey hizalama

Belgeye göre thead içindeki hücreler her zaman alta hizalanır, tbody içindekiler ise hizalamayı tablodan devralır ve varsayılanda üste hizalıdır. Derlenmiş CSS'teki .table { vertical-align: top; } ve .table > thead { vertical-align: bottom; } kuralları bunu sağlar. Hizalamayı değiştirmek için .align-middle gibi dikey hizalama sınıflarını tabloya, satıra ya da hücreye verirsiniz; daha yakın olan öge kazanır:

<table class="table align-middle">
  <thead>
    <tr>
      <th scope="col" class="w-25">Başlık 1</th>
      <th scope="col" class="w-25">Başlık 2</th>
      <th scope="col" class="w-50">Açıklama</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tablodan ortaya hizalama alır</td>
      <td class="align-top">Bu hücre üste hizalı</td>
      <td>Satırı uzatan, birkaç satıra yayılan uzun bir açıklama metni; diğer hücrelerin dikey konumu bu sayede görülebilir.</td>
    </tr>
    <tr class="align-bottom">
      <td>Satırdan alta hizalama alır</td>
      <td>Satırdan alta hizalama alır</td>
      <td>Satırı uzatan, birkaç satıra yayılan uzun bir açıklama metni; diğer hücrelerin dikey konumu bu sayede görülebilir.</td>
    </tr>
  </tbody>
</table>

Sütun başlıklarındaki .w-25 ve .w-50 sınıfları sütun genişliklerini yüzde olarak sabitler; bu sınıflar boyut sınıfları yazısında, dikey hizalama sınıflarının genel kullanımı da aynı yazıda anlatılıyor.

İç içe tablolar

v5'te iç içe tablolar dıştaki tablonun stillerini devralmaz: kenarlık, etkin satır ve renk varyantları içteki tabloya geçmez, içteki tablo kendi sınıflarıyla bağımsız biçimlendirilir. Bunu sağlayan, derlenmiş CSS'teki biraz garip görünen .table > :not(caption) > * > * seçicisidir. Belgenin açıklamasına göre bu seçici, alt öğe birleştiricisiyle yalnızca tablonun kendi thead, tbody ve tfoot bölümlerindeki hücreleri hedefler, içteki tablonun hücrelerine ulaşmaz. Belge bir ayrıntıyı daha not eder: tr ögelerini doğrudan table içine yazarsanız tarayıcı bunları otomatik olarak bir tbody içine alır, böylece seçici yine çalışır. Taşıma notları bu davranışı v4'e göre kırıcı bir değişiklik olarak listeler.

Bölümler arasındaki koyu çizgi

Bootstrap tablosunda başlık bölümü ile gövde arasındaki çizginin diğer satır ayırıcılarından daha koyu görünmesi tesadüf değildir. Derlenmiş CSS'te .table > :not(:last-child) > :last-child > * seçicisi, son bölüm dışındaki her bölümün son satırındaki hücrelerin alt çizgi rengini currentColor yapar; yani çizgi metin rengini alır. Sass tarafında bu rengin karşılığı $table-group-separator-color değişkenidir ve varsayılan değeri currentColor olarak tanımlıdır. Bölüm ayırıcısını diğer çizgilerle aynı açık griye çekmek istiyorsanız bu değişkeni değiştirmeniz yeterlidir. Gövdeden sonra bir tfoot eklerseniz gövdenin son satırı da aynı koyu çizgiyi alır, çünkü gövde artık son bölüm değildir.

Tablo başlığı, alt bilgisi ve açıklaması

Başlık bölümünü açık ya da koyu gri göstermek için thead ögesine .table-light ya da .table-dark verirsiniz. v4'teki .thead-light ve .thead-dark sınıfları kaldırıldı; yerine tüm tablo ögelerinde kullanılabilen .table-* varyantları geldi. Alt bilgi için standart tfoot ögesi kullanılır. caption ögesi ise tablonun başlığı gibi çalışır; belge, ekran okuyucu kullanıcılarının tabloyu bulmasına, ne hakkında olduğunu anlamasına ve okuyup okumamaya karar vermesine yardım ettiğini belirtir. Açıklama varsayılanda tablonun altında, soluk renkte durur; .caption-top sınıfıyla üste alınır.

<table class="table caption-top">
  <caption>Mart ayı kullanım özeti</caption>
  <thead class="table-light">
    <tr>
      <th scope="col">Hizmet</th>
      <th scope="col" class="text-end">Kullanım</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Disk</td>
      <td class="text-end">18 GB</td>
    </tr>
    <tr>
      <td>Trafik</td>
      <td class="text-end">240 GB</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Kota</th>
      <td class="text-end">Sınırsız trafik, 50 GB disk</td>
    </tr>
  </tfoot>
</table>

Sayısal sütunlarda .text-end kullanmak rakamların basamak hizasında okunmasını kolaylaştırır; metin hizalama sınıfları metin sınıfları yazısında anlatılıyor.

Duyarlı tablolar: .table-responsive

Sütun sayısı fazla olan tablolar dar ekranlarda sayfanın dışına taşar. Bunu önlemek için tabloyu .table-responsive sınıflı bir div ile sararsınız; sarmalayıcı derlenmiş CSS'te overflow-x: auto alır ve tablo kendi kutusunda yatay kaydırılır. Yalnızca belirli bir genişliğin altında kaydırma istiyorsanız .table-responsive-sm, -md, -lg, -xl ve -xxl sürümleri vardır. Bunlar diğer duyarlı sınıfların tersine "bu genişliğe kadar" anlamına gelir; .table-responsive-md derlenmiş CSS'te @media (max-width: 767.98px) içinde tanımlıdır, yani md kırılma noktasından itibaren tablo normal davranır.

<!-- Her genişlikte yatay kaydırma -->
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

<!-- Yalnızca md kırılma noktasının altında (767.98px ve daha dar) yatay kaydırma -->
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

Uygulamalı örnek: sipariş tablosu

Resmî Dashboard şablonu tabloyu table-responsive sarmalayıcısı içinde table table-striped table-sm sınıflarıyla kullanır. Aşağıdaki örnek aynı fikre vurgu, ortaya hizalama, üstte açıklama, açık başlık ve sağa hizalı tutar sütunu ekler. Ödeme bekleyen satır .table-warning ile renklenir; zebra ve vurgu bu satırda da iç gölge katmanı sayesinde çalışmaya devam eder.

<div class="table-responsive">
  <table class="table table-striped table-hover table-sm align-middle caption-top">
    <caption>Son siparişler</caption>
    <thead class="table-light">
      <tr>
        <th scope="col">Sipariş</th>
        <th scope="col">Müşteri</th>
        <th scope="col">Tarih</th>
        <th scope="col" class="text-end">Tutar</th>
        <th scope="col">Durum</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">#1042</th>
        <td>Ayşe Yılmaz</td>
        <td class="text-nowrap">02.11.2026</td>
        <td class="text-end text-nowrap">1.250,00 TL</td>
        <td><span class="badge bg-success">Teslim edildi</span></td>
      </tr>
      <tr class="table-warning">
        <th scope="row">#1043</th>
        <td>Mehmet Demir</td>
        <td class="text-nowrap">03.11.2026</td>
        <td class="text-end text-nowrap">480,50 TL</td>
        <td><span class="badge bg-warning text-dark">Ödeme bekliyor</span></td>
      </tr>
      <tr>
        <th scope="row">#1044</th>
        <td>Zeynep Kaya</td>
        <td class="text-nowrap">04.11.2026</td>
        <td class="text-end text-nowrap">3.900,00 TL</td>
        <td><span class="badge bg-secondary">Hazırlanıyor</span></td>
      </tr>
    </tbody>
  </table>
</div>

Tarih ve tutar hücrelerindeki .text-nowrap, dar ekranda "1.250,00" ile "TL" arasında satır kırılmasını önler; yatay kaydırma zaten .table-responsive tarafından sağlandığı için hücrelerin daralmasına gerek yoktur. Durum rozetleri badge yazısında anlatılıyor; sarı rozette .text-dark kullanılması renk kontrastı içindir.

Sass ile özelleştirme

Tablo değişkenleri hücre iç boşluğunu, vurgu oranlarını ve varyant renklerini belirler:

// scss/_variables.scss (v5.0.2), kısaltılmış
$table-cell-padding-y:        .5rem !default;
$table-cell-padding-x:        .5rem !default;
$table-cell-padding-y-sm:     .25rem !default;
$table-cell-padding-x-sm:     .25rem !default;

$table-striped-bg-factor:     .05 !default;
$table-active-bg-factor:      .1 !default;
$table-hover-bg-factor:       .075 !default;

$table-striped-order:         odd !default;
$table-bg-scale:              -80% !default;

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
) !default;

Belgeye göre oran değişkenleri ($table-striped-bg-factor, $table-active-bg-factor ve $table-hover-bg-factor) varyantlardaki kontrastı belirler. Belgenin özelleştirme bölümü açık ve koyu dışındaki tema renklerinin $table-bg-level değişkeniyle açıldığını söyler; ancak v5.0.2 kaynak kodunda bu değişken yoktur, işi yukarıda görülen $table-bg-scale (-80%) ve shift-color() fonksiyonu yapar. Zebra satırların tek mi çift mi olacağı $table-striped-order ile seçilir. Varyantları üreten table-variant() karışımı v4'teki table-row-variant() karışımının yeniden adlandırılmış hâlidir ve yalnızca ad ile renk alır; kenarlık ve vurgu renklerini kendisi hesaplar. Değişkenleri ezme düzeni Sass ile özelleştirme yazısında anlatılıyor.

Sık yapılan hatalar

• .table olmadan değiştirici sınıf: .table-striped tek başına çalışmaz; önce .table gerekir.
• v4 adları: .thead-light ve .thead-dark 5.0'da yoktur; thead ögesine .table-light ya da .table-dark verin.
• Sınıfı sarmalayıcı yerine tabloya vermek: .table-responsive tabloyu saran div ögesine verilir.
• Dış tablonun stilinin içe geçmesini beklemek: iç içe tablolar stil devralmaz; içteki tabloya da .table ve gerekli sınıfları verin.
• Duyarlı tabloda dropdown: sarmalayıcı açılan menüyü kırpabilir; hücre içi menüleri test edin.
• Zemini background-color ile ezmek: vurgu sınıflarıyla uyum için --bs-table-bg değişkenini değiştirin.

Sık Sorulan Sorular

Bootstrap tablosunu mobilde nasıl kaydırılabilir yaparım?

Tabloyu <div class="table-responsive"> içine alın. Yalnızca belirli bir genişliğin altında kaydırma istiyorsanız .table-responsive-lg gibi bir sürüm kullanın; o kırılma noktasından itibaren tablo normal görünür.

Tek bir hücreyi nasıl renklendiririm?

Hücreye doğrudan .table-danger gibi bir varyant verin. Varyantlar tabloya, satıra ve tekil td ya da th ögesine uygulanabilir.

Zebra satırlar neden başlıkta görünmüyor?

.table-striped yalnızca tbody içindeki tek numaralı satırları hedefler. Başlık bölümünü ayırmak için thead ögesine .table-light ya da .table-dark verebilirsiniz.

Tablo neden her zaman tam genişlik kaplıyor?

.table derlenmiş CSS'te width: 100% ve margin-bottom: 1rem ile tanımlıdır. Az sütunlu bir tablonun içeriği kadar yer kaplamasını istiyorsanız tabloya .w-auto ekleyebilirsiniz; yardımcı sınıf !important taşıdığı için temel kuralı ezer.

Hücre aralığını küçültmenin yolu nedir?

.table-sm hücre iç boşluğunu .5rem değerinden .25rem değerine indirir. Daha ince ayar gerekiyorsa Sass ile $table-cell-padding-y ve $table-cell-padding-x değişkenlerini değiştirebilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap renk sınıfları · Kenarlık sınıfları · Boyut ve hizalama sınıfları · Metin sınıfları · Bootstrap dropdown