Bootstrap 5 Tablolar

Temel tablo

Bir temel Bootstrap 5 tablosu biraz iç boşluk ve yatay ayırıcıyla birlikte gelir.

.table Tabloya temel stiller ekleyen sınıf:

Örnek

Kişisel olarak deneyin

Desenli satırlar

.table-striped Tabloya zebra desen ekleyen sınıf:

Örnek

Kişisel olarak deneyin

Çerçeveli tablo

.table-bordered Tablo ve hücrelerin tüm sınırlarına çerçeve ekleyen sınıf:

Örnek

Kişisel olarak deneyin

Fırlama etkisi olan satırlar

.table-hover Sınırlar eklenmiş tablo satırlarına fırlama etkisi (gri arka renk):

Örnek

Kişisel olarak deneyin

Siyah/yüksek renkli tablo

.table-dark Tabloya siyah arka renk ekleyen sınıf:

Örnek

Kişisel olarak deneyin

Koyu renkli çizgili tablo

birleştir .table-dark ve .table-striped Koyu renkli çizgili tablo oluşturmak için:

Örnek

Kişisel olarak deneyin

Fırlama etkisi olan koyu renkli tablo

.table-hover Sınırlar eklenmiş tablo satırlarına fırlama etkisi (gri arka renk):

Örnek

Kişisel olarak deneyin

Sınırsız tablo

.table-borderless Tabloyu sınırlarından silin

Örnek

Kişisel olarak deneyin

Bağlam sınıfları

Bağlam sınıfları, tüm tabloya (<table>) tablo satırı (<tr>) veya tablo hücresi (<td>) Renklendirme.

Örnek

Kişisel olarak deneyin

Kullanılabilir bağlam sınıfları:

Sınıf Açıklama
.table-primary Mavi: Önemli eylemleri temsil eder.
.table-success Yeşil: Başarı veya olumlu eylemleri temsil eder.
.table-danger Kırmızı: Tehlike veya olası olumsuz davranışı temsil eder.
.table-info Açık mavi: Ortağın değişen veya gerçekleştirilen işlemleri veya bilgileri temsil eder.
.table-warning Sarı: Dikkat edilmesi gereken olası uyarıları temsil eder.
.table-active Gri: Üzerinde durulan tablo satırları veya hücrelerine kaydırma rengi uygular.
.table-secondary Gri: Daha az önemli eylemleri temsil eder.
.table-light Açık gri tablo veya tablo satırı arka planı.
.table-dark Koyu gri tablo veya tablo satırı arka planı.

Tablo başlık rengi

Ayrıca, yalnızca tablo başlıklarına arka plan rengi eklemek için herhangi bir bağlam sınıfını kullanabilirsiniz:

Örnek

Kişisel olarak deneyin

Küçük tablo

.table-sm Sınıf, hücre doldurma miktarını yarıya indirerek tabloyu küçültür:

Örnek

Kişisel olarak deneyin

Yansıtıcı tablo

.table-responsive Gerekirse sınıf, tabloya kaydırma çubuğu ekler (düzeyde çok büyükse):

Örnek

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Kişisel olarak deneyin

Ayrıca, ne zaman sıradan bir tabloya kaydırma çubuğu eklenmesi gerektiğini ekran genişliğine bağlı olarak belirleyebilirsiniz:

Sınıf Ekran genişliği
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Örnek

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Kişisel olarak deneyin