Source

Tablolar

Bootstrap ile tabloların tercihli stiline (JavaScript eklentilerinde yaygın kullanımları göz önüne alındığında) ilişkin belgeler ve örnekler.

Örnekler

Takvimler ve tarih seçiciler gibi üçüncü taraf widget'larda tabloların yaygın kullanımı nedeniyle, tablolarımızı isteğe bağlı olacak şekilde tasarladık . Temel sınıfı .tableherhangi birine ekleyin <table>, ardından özel stiller veya dahil edilen çeşitli değiştirici sınıflarımızla genişletin.

En temel tablo işaretlemesini kullanarak, .tableBootstrap'ta tabanlı tabloların nasıl göründüğü aşağıda açıklanmıştır. Tüm tablo stilleri Bootstrap 4'te devralınır , yani iç içe geçmiş tablolar üst öğeyle aynı şekilde stillendirilir.

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Renkleri, koyu arka planlar üzerinde açık metinle birlikte, ile de tersine çevirebilirsiniz .table-dark.

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Masa başı seçenekleri

Tablolara ve koyu tablolara benzer şekilde, değiştirici sınıfları .thead-lightveya s'nin açık veya koyu gri görünmesini .thead-darksağlamak için kullanın.<thead>

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Çizgili satırlar

.table-stripediçindeki herhangi bir tablo satırına zebra çizgileri eklemek için kullanın <tbody>.

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

bordürlü masa

.table-borderedTablonun ve hücrelerin her tarafında kenarlıklar ekleyin .

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Kenarlıksız masa

.table-borderlessKenarlıksız bir tablo için ekleyin .

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderlesskaranlık masalarda da kullanılabilir.

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

gezinebilir satırlar

.table-hoveriçindeki tablo satırlarında fareyle üzerine gelme durumunu etkinleştirmek için ekleyin <tbody>.

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Küçük masa

.table-smHücre dolgusunu yarıya indirerek tabloları daha kompakt hale getirmek için ekleyin .

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

bağlamsal sınıflar

Tablo satırlarını veya tek tek hücreleri renklendirmek için bağlamsal sınıfları kullanın.

Sınıf Başlık Başlık
Aktif Hücre Hücre
Varsayılan Hücre Hücre
Öncelik Hücre Hücre
İkincil Hücre Hücre
Başarı Hücre Hücre
Tehlike Hücre Hücre
Uyarı Hücre Hücre
Bilgi Hücre Hücre
Işık Hücre Hücre
Karanlık Hücre Hücre 
<!-- On rows -->
<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>

<!-- On cells (`td` or `th`) -->
<tr>
  <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>
</tr>

Normal tablo arka planı varyantları, karanlık tabloda mevcut değildir, ancak benzer stiller elde etmek için metin veya arka plan yardımcı programlarını kullanabilirsiniz.

# Başlık Başlık
1 Hücre Hücre
2 Hücre Hücre
3 Hücre Hücre
4 Hücre Hücre
5 Hücre Hücre
6 Hücre Hücre
7 Hücre Hücre
8 Hücre Hücre
9 Hücre Hücre 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

.tableHerhangi birini ile sararak, tablonun sırasıyla 576px, 768px, 992px ve 1120px'e kadar (ancak dahil değil) .table-responsive{-sm|-md|-lg|-xl}her kesme noktasında yatay olarak kaydırılmasını sağlayarak duyarlı tablolar oluşturun .max-width

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Dikey kırpma/kesme

Duyarlı tablolar overflow-y: hidden, tablonun alt veya üst kenarlarının ötesine geçen herhangi bir içeriği kesen öğesini kullanır. Özellikle, bu, açılır menüleri ve diğer üçüncü taraf widget'larını kırpabilir.

Her zaman duyarlı

Her kesme noktasında, .table-responsiveyatay olarak kayan tablolar için kullanın.

# Başlık Başlık Başlık Başlık Başlık Başlık Başlık Başlık Başlık
1 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
2 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
3 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Kesme noktasına özgü

.table-responsive{-sm|-md|-lg|-xl}Belirli bir kesme noktasına kadar duyarlı tablolar oluşturmak için gerektiği gibi kullanın . Bu kesme noktasından itibaren, tablo normal şekilde davranacak ve yatay olarak kaydırılmayacaktır.

Bu tablolar, duyarlı stilleri belirli görünüm alanı genişliklerinde uygulanana kadar bozuk görünebilir.

# Başlık Başlık Başlık Başlık Başlık Başlık Başlık Başlık
1 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
2 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
3 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Başlık Başlık Başlık Başlık Başlık Başlık Başlık Başlık
1 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
2 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
3 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Başlık Başlık Başlık Başlık Başlık Başlık Başlık Başlık
1 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
2 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
3 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Başlık Başlık Başlık Başlık Başlık Başlık Başlık Başlık
1 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
2 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre
3 Hücre Hücre Hücre Hücre Hücre Hücre Hücre Hücre 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>