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>

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-önekler 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.

#	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
2	Hücre	Hücre	Hücre	Hücre	Hücre
3	Hücre	Hücre	Hücre	Hücre	Hücre

#	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
2	Hücre	Hücre	Hücre	Hücre	Hücre
3	Hücre	Hücre	Hücre	Hücre	Hücre

#	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
2	Hücre	Hücre	Hücre	Hücre	Hücre
3	Hücre	Hücre	Hücre	Hücre	Hücre

#	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
2	Hücre	Hücre	Hücre	Hücre	Hücre
3	Hücre	Hücre	Hücre	Hücre	Hücre

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>