Bootstrap, veri düzenlemeyi kolaylaştıran ve görsel olarak estetik tablolar oluşturmayı sağlayan güçlü bir tablo sınıfı sistemi sunar. Varsayılan tabloların yanı sıra, çeşitli stiller ve özelliklerle tabloları özelleştirebilirsiniz.
Temel Tablo Yapısı
Bootstrap tablolar, table etiketine .table sınıfı eklenerek oluşturulur.
Örnek:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Ad</th>
<th>Soyad</th>
<th>E-posta</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Ayşe</td>
<td>Kara</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Bootstrap Tablo Sınıfları
Bootstrap, tabloları daha şık ve işlevsel hale getiren çeşitli hazır sınıflar sunar.
| Sınıf | Açıklama |
|---|---|
.table | Temel tablo sınıfı. |
.table-striped | Her satırda alternatif renkler (çizgili tasarım) ekler. |
.table-bordered | Tabloya kenarlık ekler. |
.table-hover | Satırların üzerine gelindiğinde arka plan rengi değişir. |
.table-dark | Koyu tema için tablo tasarımı sunar. |
.table-sm | Daha küçük ve sıkıştırılmış bir tablo oluşturur. |
.table-responsive | Mobil cihazlarda tabloyu yatay kaydırılabilir hale getirir. |
Sık Kullanılan Örnekler
Çizgili Tablolar (.table-striped)
Tabloda her satırın farklı bir renkte görünmesini sağlar.
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Ad</th>
<th>Soyad</th>
<th>E-posta</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmet</td>
<td>Yılmaz</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2</td>
<td>Ayşe</td>
<td>Kara</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
Kenarlıklı Tablolar (.table-bordered)
Tablo hücrelerinin etrafına kenarlık ekler.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Ürün</th>
<th>Fiyat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bilgisayar</td>
<td>10.000 TL</td>
</tr>
<tr>
<td>2</td>
<td>Telefon</td>
<td>8.000 TL</td>
</tr>
</tbody>
</table>
Hover Efektli Tablolar (.table-hover)
Satırın üzerine gelindiğinde görsel bir vurgulama sağlar.
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Ad</th>
<th>Yaş</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ali</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Zeynep</td>
<td>30</td>
</tr>
</tbody>
</table>
Koyu Tema Tabloları (.table-dark)
Koyu renk şeması ile uyumlu tablolar oluşturur.
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>Ürün</th>
<th>Stok</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mouse</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Klavye</td>
<td>30</td>
</tr>
</tbody>
</table>
Duyarlı (Responsive) Tablolar
Büyük tablolar, küçük ekranlarda düzgün bir şekilde görüntülenmeyebilir. Bootstrap, tabloyu yatay kaydırılabilir hale getirmek için .table-responsive sınıfını sağlar.
Örnek:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Ürün</th>
<th>Fiyat</th>
<th>Stok</th>
<th>Açıklama</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bilgisayar</td>
<td>10.000 TL</td>
<td>20</td>
<td>Yüksek performanslı laptop</td>
</tr>
<tr>
<td>2</td>
<td>Telefon</td>
<td>8.000 TL</td>
<td>50</td>
<td>Son model akıllı telefon</td>
</tr>
</tbody>
</table>
</div>
Bootstrap Tabloların Avantajları
- Kullanım Kolaylığı: Önceden tanımlı sınıflar, tabloları hızlı bir şekilde düzenlemeyi sağlar.
- Duyarlılık (Responsive): Küçük ekranlarda bile tablolar düzgün görüntülenir.
- Görsellik: Çizgili, kenarlıklı ve koyu tema gibi stillerle modern bir görünüm sunar.