Bootstrap İçerik Tablolar

Bootstrap, içerik tablolarını oluşturmak için güçlü ve esnek bir yapı sunar. Tablolar, verileri düzenli bir şekilde sunmanın ve karşılaştırmanın etkili bir yoludur. Aşağıda, Bootstrap kullanarak tablolar oluşturma, stil verme ve geliştirme yöntemleri hakkında detaylı bilgiler bulunmaktadır:

1. Temel Tablolar

Bootstrap, basit tablolar oluşturmak için .table sınıfını kullanır. Tablolar, table, table-striped, table-bordered, table-hover gibi çeşitli yardımcı sınıflarla birlikte daha işlevsel ve estetik hale getirilebilir.

Örnek:

 
  <table class="table"> <thead> <tr> <th>#</th> <th>Ad</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ali</td> <td>ali@example.com</td> </tr> <tr> <td>2</td> <td>Aylin</td> <td>aylin@example.com</td> </tr> </tbody> </table>  
 
 

2. Tablo Sınıfları

Bootstrap, tablolarınıza farklı görsel efektler ve stiller eklemek için aşağıdaki sınıfları sunar:

• .table-striped : Her iki satırı alternatif renkte gösterir, bu da okuma kolaylığı sağlar.

  Örnek:

   
    <table class="table table-striped"> ... </table>  
   
   

  Canlı Dene Kopyala

• .table-bordered : Tablonun her hücresine kenarlık ekler.

  Örnek:

   
    <table class="table table-bordered"> ... </table>  
   
   

  Canlı Dene Kopyala

• .table-hover : Fare ile üzerine gelindiğinde satırların rengini değiştirir.

  Örnek:

   
    <table class="table table-hover"> ... </table>  
   
   

  Canlı Dene Kopyala

3. Responsive Tablolar

Büyük ekranlarda iyi görünebilmesi için tabloları responsive hale getirmek önemlidir. Bootstrap, bu amaçla table-responsive sınıfını kullanır. Bu sınıf, tablonun belirli bir genişliğe ulaştığında yatay kaydırma çubuğu ile kaydırılmasını sağlar.

Örnek:

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

4. Tablo Başlıkları ve Gövde

Tablolarınızda başlık ve gövde kullanmak için <thead> ve <tbody> etiketlerini kullanabilirsiniz. Bu, verilerinizi daha düzenli ve okunabilir hale getirir.

Örnek:

 
  <table class="table"> <thead> <tr> <th>Ürün</th> <th>Fiyat</th> </tr> </thead> <tbody> <tr> <td>Ürün 1</td> <td>$10</td> </tr> <tr> <td>Ürün 2</td> <td>$20</td> </tr> </tbody> </table>  
 
 

5. Tablo İçerik Stilleri

Tablo hücrelerinin içindeki metinlerin stilini değiştirmek için bazı sınıflar kullanılabilir. Örneğin, hücrelerin metin rengini değiştirmek için .text-primary, .text-success, vb. sınıflar kullanılabilir.

Örnek:

 
  <td class="text-success">Başarılı</td>  
 
 

6. Tablolar İçin Özel Sınıflar

Tablolarınızda özel sınıflar oluşturarak daha fazla kontrol sağlayabilirsiniz. Örneğin, satırların arka plan rengini değiştirmek için .bg-light, .bg-dark gibi sınıflar kullanılabilir.

Örnek:

 
  <tr class="bg-light"> <td>Ürün 1</td> <td>$10</td> </tr>  
 
 

7. Tablo Aksesuarları

Bootstrap, tablo içeriklerini daha etkili bir şekilde sunmak için yardımcı bileşenler sunar. Örneğin, tablo başlıklarını belirgin hale getirmek için thead-light veya thead-dark sınıflarını kullanabilirsiniz.

Örnek:

 
  <thead class="thead-light"> <tr> <th>#</th> <th>Ad</th> <th>Email</th> </tr> </thead>  
 
 

Sonuç

Bootstrap, içerik tablolarınızı düzenlemek ve sunmak için geniş bir özellik seti sunar. Temel tablo oluşturma, stil verme, responsive tasarım ve özel sınıflar kullanarak verilerinizi daha etkili bir şekilde sunabilirsiniz. Bootstrap ile tablolarınız, profesyonel görünümlü ve kullanıcı dostu hale gelecektir.