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

Tabloların takvimler ve tarih seçiciler gibi üçüncü taraf widget'larda yaygın olarak kullanılması 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

Tarayıcılar şu anda aralık bağlamı sorgularını desteklemediğinden , bu karşılaştırmalar için daha yüksek hassasiyete sahip değerler kullanarak kesirli genişliklere sahip (örneğin yüksek dpi cihazlarda belirli koşullar altında ortaya çıkabilir ) sınırlamalar min-ve max-ön ekler ve görünüm pencereleri üzerinde çalıştığımızı unutmayın. .

Altyazılar

A <caption>, bir tablonun başlığı gibi işlev görür. Ekran okuyucuları olan kullanıcıların bir tablo bulmasına ve neyle ilgili olduğunu anlamasına ve onu okumak isteyip istemediğine karar vermesine yardımcı olur.

Kullanıcı listesi
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @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>

Duyarlı tablolar

Duyarlı tablolar, tabloların kolaylıkla yatay olarak kaydırılmasını sağlar. .tableile sararak herhangi bir tabloyu tüm görünüm alanlarında duyarlı hale getirin .table-responsive. Veya kullanarak yanıt veren bir tabloya sahip olmak için maksimum bir kesme noktası seçin .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>