Bootstrap Tablolar

Bootstrap'ta tablo oluşturmak için table, thead, tr, th, tbody ve td etiketleri kullanılmaktadır. Örnek basit bir tablo oluşturalım. Eğer tablolar konusunda hiç bilginiz yok ise html tablolar dersimize bakabilirsiniz.

Örnek Tablo:

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

Yukarıdaki 3 satır 2 sütun tablonun kodu:  

<table class="table">
    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>
</table>

Bootstrap tablo etiketi için kullanılan sınıflar: 

• .table
• .table-striped
• .table-hover
• .table-dark
• .table-bordered
• table-active
• table-primary
• table-secondary
• table-success
• table-danger
• table-warning
• table-info
• table-light
• .thead-dark
• .thead-light

Bootstrap .table Sınıfı

Bootstrap .table sınıfı en temel tablo oluşturmak için kullanılan sınıftır.  .table sınıfı olmadan bootstrap tablo oluşturamazsınız.

Bootstrap .table sınıfı kullanımı:

<table class="table">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
        <th>Başlık 3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
        <td>Hücre 3</td>
      </tr>
      <tr>
        <td>Hücre 4</td>
        <td>Hücre 5</td>
        <td>Hücre 6</td>
      </tr>
    </tbody>

</table>

Bootstrap table sınıfı çıktısı: 

Yukarıdaki kod ile oluşturulan tablodur.

Başlık 1	Başlık 2	Başlık 3
Hücre 1	Hücre 2	Hücre 3
Hücre 4	Hücre 5	Hücre 6

 

Bootstrap .table-striped Sınıfı

Bootstrap table-striped sınıfı çizgili tablo denilen bir beyaz bir gri olarak görünen tablo eklemek için kullanılır.

Bootstrap .table-striped Sınıfı Kullanımı

<table class="table table-striped">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
      <tr>
        <td>Hücre 5</td>
        <td>Hücre 6</td>
      </tr>
    </tbody>

</table>

Bootstrap table-striped sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-striped yani çizgili tablo örneğidir.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4
Hücre 5	Hücre 6

Bootstrap .table-hover Sınıfı 

Bootstrap table-hover sınıfı tabloya eklendiğinde gelinen hücrenin bulunduğu satırı belirgin hale getirmek için kullanılır.

Bootstrap .table-hover Sınıfı Kullanımı

<table class="table table-hover">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
      <tr>
        <td>Hücre 5</td>
        <td>Hücre 6</td>
      </tr>
      <tr>
        <td>Hücre 7</td>
        <td>Hücre 8</td>
      </tr>
    </tbody>

</table>

Bootstrap table-hover sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-hover yani üstüne gelindiğinde belirgin hale getiren tablo örneğidir.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4
Hücre 5	Hücre 6
Hücre 7	Hücre 8

Bootstrap .table-dark Sınıfı 

Bootstrap table-dark sınıfı tabloya eklendiğinde tabloyu siyah yani kara yapmak için kullanılır.

Bootstrap .table-dark Sınıfı Kullanımı

<table class="table table-dark">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
      <tr>
        <td>Hücre 5</td>
        <td>Hücre 6</td>
      </tr>
    </tbody>

</table>

Bootstrap table-dark sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-dark tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4
Hücre 5	Hücre 6

 

Bootstrap .table-bordered Sınıfı 

Bootstrap table-bordered sınıfı tablonun tüm kenarlarına sınır eklemek için kullanılır. Yani tablonun her tarafı çerçeve ile kaplı olur.

Bootstrap .table-bordered Sınıfı Kullanımı

<table class="table table-bordered">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-bordered sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-bordered sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-active Sınıfı 

Bootstrap table-active sınıfı tabloya eklendiğinde tablonun arkaplanını gri renk yapmak için kullanılır.

Bootstrap .table-active Sınıfı Kullanımı

<table class="table table-active">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-active sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-active sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-primary Sınıfı 

Bootstrap table-primary sınıfı tabloya eklendiğinde tablonun arkaplanını mavi renk yapmak için kullanılır.

Bootstrap .table-primary Sınıfı Kullanımı

<table class="table table-primary">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-primary sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-primary sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-secondary Sınıfı 

Bootstrap table-secondary sınıfı tabloya eklendiğinde tablonun arkaplanını koyu gri renk yapmak için kullanılır.

Bootstrap .table-secondary Sınıfı Kullanımı

<table class="table table-secondary">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-secondary sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-secondary sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-success Sınıfı 

Bootstrap table-success sınıfı tabloya eklendiğinde tablonun arkaplanını yeşil renk yapmak için kullanılır.

Bootstrap .table-success Sınıfı Kullanımı

<table class="table table-success">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-success sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-success sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-danger Sınıfı 

Bootstrap table-danger sınıfı tabloya eklendiğinde tablonun arkaplanını kırmızı renk yapmak için kullanılır.

Bootstrap .table-danger Sınıfı Kullanımı

<table class="table table-danger">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-danger sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-danger sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-warning Sınıfı 

Bootstrap table-warning sınıfı tabloya eklendiğinde tablonun arkaplanını sarı renk yapmak için kullanılır.

Bootstrap .table-warning Sınıfı Kullanımı

<table class="table table-warning">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-warning sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-warning sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-info Sınıfı 

Bootstrap table-info sınıfı tabloya eklendiğinde tablonun arkaplanını turkuaz renk yapmak için kullanılır.

Bootstrap .table-info Sınıfı Kullanımı

<table class="table table-info">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-info sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-info sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .table-light Sınıfı 

Bootstrap table-light sınıfı tabloya eklendiğinde tablonun arkaplanını beyaz renk yapmak için kullanılır.

Bootstrap .table-light Sınıfı Kullanımı

<table class="table table-light">

    <thead>
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap table-light sınıfı çıktısı:

Yukarıdaki kod ile oluşturulan bootstrap table-light sınıfı tablosunun çıktısıdır.

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .thead-dark Sınıfı 

Bootstrap table-dark sınıfı tabloya eklendiğinde tablonun başlık kısmını siyah yapmak için kullanılır.

Bootstrap .thead-dark Sınıfı Kullanımı

<table class="table">

    <thead class="thead-dark">
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap thead-dark sınıfı çıktısı:

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

 

Bootstrap .thead-light Sınıfı 

Bootstrap thead-light sınıfı tabloya eklendiğinde tablonun başlık kısmını açık gri yapmak için kullanılır.

Bootstrap .thead-light Sınıfı Kullanımı

<table class="table">

    <thead class="thead-light">
      <tr>
        <th>Başlık 1</th>
        <th>Başlık 2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hücre 1</td>
        <td>Hücre 2</td>
      </tr>
      <tr>
        <td>Hücre 3</td>
        <td>Hücre 4</td>
      </tr>
    </tbody>

</table>

Bootstrap thead-light sınıfı çıktısı:

Başlık 1	Başlık 2
Hücre 1	Hücre 2
Hücre 3	Hücre 4

Önceki Ders: Bootstrap Renkler

Sonraki Ders: Bootstrap Resimler