Bootstrap Tablolar

Bootstrap 4 tablo sınıfları ile tablolarımıza saniyeler içinde profesyonel bir görüntü katabiliriz.

<table> etiketine sadece .table sınıfını ekleyerek tablomuza padding ve yatay çizgileri eklemiş oluyoruz.

<table class="table">
  <tr>
     <th>Kurs</th>
     <th>Ders Sayısı</th> 
     <th>Öğrenci Sayısı</th>
  </tr>
  <tr>
     <td>Komple Uygulamalı Web Geliştirme Eğitimi</td>
     <td>325</td> 
     <td>3000</td>
  </tr>
  <tr>
    <td>Uygulamalı Programlama Eğitimi</td>
    <td>126</td> 
    <td>500</td>
  </tr>
</table>

Örnek 1 için tıklayınız.

** .table-striped sınıfını ekleyerek tablomuzun her satırını farklı renk ile daha belirgin hale getirebiliriz.

<table class="table table-striped">
  <tr>
    <td> </td>
  </tr> 
</table>

Örnek 2 için tıklayınız.

** .table-bordered sınıfını ekleyerek tablomuza kenarlık ekleyebiliriz.

<table class="table table-bordered">
  <tr>
    <td> </td>
  </tr>  
</table>

Örnek 3 için tıklayınız.

** .table-hover sınıfını ekleyerek her satır üzerine geldiğimizde satırı öne çıkaracak bir zemin rengi görünmesini sağlayabiliriz.

<table class="table table-hover">
  <tr>
    <td> </td>
  </tr>  
</table>

Örnek 4 için tıklayınız.

** .table-borderless sınıfını ekleyerek tablonun tüm kenarlıklarını silebiliriz.

<table class="table table-borderless">
  <tr>
    <td> </td>
  </tr>  
</table>

Örnek 5 için tıklayınız.

** .table-dark sınıfını ekleyerek siyah bir tablo elde edebiliriz.

<table class="table table-borderless table-dark">
  <tr>
    <td> </td>
  </tr>  
</table>

Örnek 6 için tıklayınız.

** .table-sm sınıfını ekleyerek daha az padding değerine sahip tablo elde edebiliriz.

<table class="table table-sm">
  <tr>
    <td> </td>
  </tr>  
</table>

Örnek 7 için tıklayınız.

Tablolar için kullanabileceğimiz bazı renk sınıfları vardır. Bu sınıfları <table>, <tr> ya da <td> etiketlerine uygulayıp ister satır ister kolon istersek de tablonun kendisi için arkaplan rengi oluşturabiliriz.

Bootstrap tablolar ile kullanabileceğimiz renk sınıfları .table-active, .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark sınıflarıdır.

 <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
 </table>

Örnek 8 için tıklayınız.

Bootstrap 4 ile responsive bir tablo oluşturmak için .table-responsive sınıfını kullanmalıyız. Eğer tablomuz satırda tüm içeriğini gösteremezse bu durumda kaydırma çubukları gösterilir.

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

    </table>
</div>

Örnek 9 için tıklayınız.