Bootstrap 4 Dersleri


7. Tablolar

Basit Tablolar

<table class="table">

Basit tablolar, az bir iç dolguya ve yatay çizgilere sahiptir.

.table Sınıfı tabloya basit stil ekler.

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Siyah/Beyaz Tablo

<table class="table table-dark">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-dark">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Zebra Tablo

<table class="table table-striped">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-striped">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Siyah Zebra Tablo

<table class="table table-striped table-dark">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-striped table-dark">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Kenarlıklı Tablo

<table class="table table-bordered">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-bordered">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Kenarlıklı Siyah Tablo

<table class="table table-bordered table-dark">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-bordered table-dark">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Kenarlıksız Tablo

<table class="table table-borderless">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-borderless">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Kenarlıksız Siyah Tablo

<table class="table table-borderless table-dark">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-borderless table-dark">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Fare Etkileşimli Tablo

<table class="table table-hover">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-hover">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Daraltılmış Tablo

<table class="table table-sm">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table table-sm">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Tablo Renkleri

<table class="table">

  <tr class="table-*">...</tr>

.table-* Sınıfları Bootstrap 4'te tanımlı renk sınıflarından biridir.
Bu sınıflar: .table-primary, .table-secondary, .table-success, .table-danger, .table-info, .table-warning, .table-light, .table-dark'dır.
Aktif olan satırı belirlemek için de kullanlan sınıf .table-active'dir.

Satırları (`tr`) Renklendirme
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

Hücreleri (`td` veya `th`) Renklendirme
<th class="table-active">...</th>
<th class="table-primary">...</th>
<th class="table-secondary">...</th>
<th class="table-success">...</th>
<th class="table-danger">...</th>
<th class="table-warning">...</th>
<th class="table-info">...</th>
<th class="table-light">...</th>
<th class="table-dark">...</th>

<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
SN Adı Soyadı E-Posta Renk Sınıfı
1 Hasan Can hasan@hasancan.net .table-active
2 Şükrü Kaya posta@sukrukaya.net .table-primary
3 Bilge Hepgüler bilge@kutuphane.com .table-secondary
4 Hasan Can hasan@hasancan.net .table-success
5 Şükrü Kaya posta@sukrukaya.net .table-danger
6 Bilge Hepgüler bilge@kutuphane.com .table-info
7 Hasan Can hasan@hasancan.net .table-warning
8 Şükrü Kaya posta@sukrukaya.net .table-light
9 Bilge Hepgüler bilge@kutuphane.com .table-dark
<table class="table">
  <thead>
    <tr>
      <th>SN</th>
      <th>Adı</th>
      <th>Soyadı</th>
      <th>E-Posta</th>
      <th>Renk Sınıfı</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <th>1</th>
      <td>Hasan</td>
      <td>Can</td>
      <td>hasan@hasancan.net</td>
      <td><code>.table-active</code></td>
    </tr>
    <tr class="table-primary">
      <th>2</th>
      <td>Şükrü</td>
      <td>Kaya</td>
      <td>posta@sukrukaya.net</td>
      <td><code>.table-primary</code></td>
    </tr>
    <tr class="table-secondary">
      <th>3</th>
      <td>Bilge</td>
      <td>Hepgüler</td>
      <td>bilge@kutuphane.com</td>
      <td><code>.table-secondary</code></td>
    </tr>
    <tr class="table-success">
      <th>4</th>
      <td>Hasan</td>
      <td>Can</td>
      <td>hasan@hasancan.net</td>
      <td><code>.table-success</code></td>
    </tr>
    <tr class="table-danger">
      <th>5</th>
      <td>Şükrü</td>
      <td>Kaya</td>
      <td>posta@sukrukaya.net</td>
      <td><code>.table-danger</code></td>
    </tr>
    <tr class="table-info">
      <th>6</th>
      <td>Bilge</td>
      <td>Hepgüler</td>
      <td>bilge@kutuphane.com</td>
      <td><code>.table-info</code></td>
    </tr>
    <tr class="table-warning">
      <th>7</th>
      <td>Hasan</td>
      <td>Can</td>
      <td>hasan@hasancan.net</td>
      <td><code>.table-warning</code></td>
    </tr>
    <tr class="table-light">
      <th>8</th>
      <td>Şükrü</td>
      <td>Kaya</td>
      <td>posta@sukrukaya.net</td>
      <td><code>.table-light</code></td>
    </tr>
    <tr class="table-dark">
      <th>9</th>
      <td>Bilge</td>
      <td>Hepgüler</td>
      <td>bilge@kutuphane.com</td>
      <td><code>.table-dark</code></td>
    </tr>
  </tbody>
</table>

Tablo Başlık Reknlendirme

Siyah Başlıklı Tablo

<table class="table">

  <thead class="thead-dark">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Gri Başlıklı Tablo

<table class="table">

  <thead class="thead-light">

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<table class="table">
 <thead>
  <tr>
   <th>SN</th>
   <th>Adı</th>
   <th>Soyadı</th>
   <th>E-Posta</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>1</th>
   <td>Şükrü</td>
   <td>Kaya</td>
   <td>posta@sukrukaya.net</td>
  </tr>
  <tr>
   <th>2</th>
   <td>Bilge</td>
   <td>Hepgüler</td>
   <td>bilge@kutuphane.com</td>
  </tr>
  <tr>
   <th>3</th>
   <td>Hasan</td>
   <td>Can</td>
   <td>hasan@hasancan.net</td>
  </tr>
 </tbody>
</table>

Duyarlı (Responsive) Tablolar

.table-responsive sınıfı duyarlı (responsive) bir tablo 992 pikselden daha geniş olan ekranlarda (gerekirse) tabloya yatay bir kaydırma çubuğu eklenir. 992 piksel genişliğinden daha büyük herhangi bir şeyi görüntülerken hiçbir fark yoktur.

<div class="table-responsive">

  <table class="table">

    ...

  </table>

</div>


Tablonun ekran genişliğine bağlı olarak ne zaman kaydırma çubuğu eklemesi gerektiğine de karar verebilirsiniz:

Sınıf AdıEkran Genişlği
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px

SN Adı Soyadı E-Posta
1 Şükrü Kaya posta@sukrukaya.net
2 Bilge Hepgüler bilge@kutuphane.com
3 Hasan Can hasan@hasancan.net
<div class="table-responsive" style="width:300px;">
  <table class="table">
    <thead>
      <tr>
        <th>SN</th>
        <th>Adı</th>
        <th>Soyadı</th>
        <th>E-Posta</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>Şükrü</td>
        <td>Kaya</td>
        <td>posta@sukrukaya.net</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Bilge</td>
        <td>Hepgüler</td>
        <td>bilge@kutuphane.com</td>
      </tr>
      <tr>
        <th>3</th>
        <td>Hasan</td>
        <td>Can</td>
        <td>hasan@hasancan.net</td>
      </tr>
    </tbody>
  </table>
</div>