Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

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.

Bu sayfada

genel bakış

<table>Takvimler ve tarih seçiciler gibi üçüncü taraf widget'larda öğelerin yaygın kullanımı nedeniyle , Bootstrap'in tabloları isteğe bağlıdır . .tableHerhangi birine temel sınıfı ekleyin <table>, ardından isteğe bağlı değiştirici sınıflarımızla veya özel stillerimizle genişletin. Tüm tablo stilleri Bootstrap'ta miras alınmaz, yani iç içe geçmiş tablolar üst öğeden bağımsız olarak stillendirilebilir.

En temel tablo işaretlemesini kullanarak, .tableBootstrap'ta tabanlı tabloların nasıl göründüğü aşağıda açıklanmıştır.

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Varyantlar

Tabloları, 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
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
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 .visually-hiddensınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Aksanlı tablolar

Ç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 Kuş Larry @twitter 
<table class="table table-striped">
  ...
</table>

Bu sınıflar ayrıca tablo türevlerine eklenebilir:

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-success table-striped">
  ...
</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">
  ...
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Bu gezinilebilir sıralar, çizgili varyantla da birleştirilebilir:

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Aktif tablolar

.table-activeBir sınıf ekleyerek bir tablo satırını veya hücresini vurgulayın .

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Varyantlar ve aksanlı tablolar nasıl çalışır?

Aksanlı tablolar için ( çizgili satırlar , üzerine gelinebilir satırlar ve etkin tablolar ), bu efektlerin tüm tablo çeşitlerimizde çalışmasını sağlamak için bazı teknikler kullandık :

  • --bs-table-bgÖzel özellik ile bir tablo hücresinin arka planını ayarlayarak başlıyoruz . Tüm tablo varyantları daha sonra tablo hücrelerini renklendirmek için bu özel özelliği ayarlar. Bu sayede tablo arka planı olarak yarı şeffaf renkler kullanılırsa sorun yaşamayız.
  • box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);Ardından , belirtilen herhangi bir katmanın üzerine katmanla tablo hücrelerine bir iç kutu gölgesi ekleriz background-color. Büyük bir yayılma kullandığımız ve bulanıklık olmadığı için renk monoton olacaktır. --bs-table-accent-bgVarsayılan olarak ayarlanmadığından, varsayılan bir kutu gölgemiz yok .
  • .table-striped, veya sınıfları eklendiğinde, .table-hoverarka planı renklendirmek için yarı saydam bir renge ayarlanır..table-active--bs-table-accent-bg
  • Her tablo çeşidi için, --bs-table-accent-bgo renge bağlı olarak en yüksek kontrasta sahip bir renk oluştururuz. Örneğin, vurgu rengi daha .table-primarykoyuyken .table-darkdaha açık vurgu rengine sahiptir.
  • Metin ve kenarlık renkleri aynı şekilde oluşturulur ve renkleri varsayılan olarak devralınır.

Perde arkasında şöyle görünüyor:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Tablo kenarlıkları

Kenarlıklı tablolar

.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">
  ...
</table>

Renkleri değiştirmek için kenarlık rengi yardımcı programları eklenebilir:

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Kenarlıksız tablolar

.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">
  ...
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Küçük masalar

Tüm hücreyi yarıya indirerek daha kompakt .table-smhale getirmek için ekleyin ..tablepadding

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-sm">
  ...
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Kuş Larry @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Dikey hizalama

Tablo hücreleri <thead>her zaman alta dikey olarak hizalanır. Tablo hücreleri <tbody>, hizalamalarını devralır <table>ve varsayılan olarak en üste hizalanır. Gerektiğinde yeniden hizalamak için dikey hizalama sınıflarını kullanın.

Başlık 1 Başlık 2 Başlık 3 Başlık 4
Bu hücre vertical-align: middle;tablodan miras alır Bu hücre vertical-align: middle;tablodan miras alır Bu hücre vertical-align: middle;tablodan miras alır Bu, dikey hizalamanın önceki hücrelerde nasıl çalıştığını göstermek için oldukça fazla dikey alan kaplaması amaçlanan bazı yer tutucu metinlerdir.
Bu hücre vertical-align: bottom;tablo satırından miras alır Bu hücre vertical-align: bottom;tablo satırından miras alır Bu hücre vertical-align: bottom;tablo satırından miras alır Bu, dikey hizalamanın önceki hücrelerde nasıl çalıştığını göstermek için oldukça fazla dikey alan kaplaması amaçlanan bazı yer tutucu metinlerdir.
Bu hücre vertical-align: middle;tablodan miras alır Bu hücre vertical-align: middle;tablodan miras alır Bu hücre üste hizalanır. Bu, dikey hizalamanın önceki hücrelerde nasıl çalıştığını göstermek için oldukça fazla dikey alan kaplaması amaçlanan bazı yer tutucu metinlerdir. 
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

yuvalama

Kenarlık stilleri, etkin stiller ve tablo varyantları, iç içe geçmiş tablolar tarafından devralınmaz.

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
başlık başlık başlık
A Öncelikle Son
B Öncelikle Son
C Öncelikle Son
3 Larry kuş @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Yuvalama nasıl çalışır?

Herhangi bir stilin iç içe tablolara sızmasını önlemek için CSS'mizde alt birleştirici ( >) seçicisini kullanıyoruz. , , ve içindeki tüm tds ve ths öğelerini hedeflememiz gerektiğinden, seçicimiz onsuz oldukça uzun görünür. Bu nedenle, tüm s ve s öğelerini hedeflemek için oldukça garip görünen seçiciyi kullanırız , ancak iç içe geçmiş olası tabloların hiçbirini kullanmaz.theadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>Bir tablonun doğrudan çocukları olarak s eklerseniz , bunların varsayılan <tr>olarak a içine sarılacağını ve <tbody>böylece seçicilerimizin istendiği gibi çalışmasını sağlayacağını unutmayın.

Anatomi

masa başı

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

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

masa ayağı

# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter
altbilgi altbilgi altbilgi altbilgi 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

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 Kuş Larry @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<caption>ile masanın üstüne de koyabilirsiniz .caption-top.

Kullanıcı listesi
# Öncelikle Son Üstesinden gelmek
1 İşaret Otto @mdo
2 Yakup Thornton @yağ
3 Larry kuş @twitter 
<table class="table caption-top">
  <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|-xxl}.

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|-xxl}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
# 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
# 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
# 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
# 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
# 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">
  <table class="table">
    ...
  </table>
</div>

<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>

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

küstah

Değişkenler

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Döngü

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

özelleştirme

  • Faktör değişkenleri ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) tablo değişkenlerindeki kontrastı belirlemek için kullanılır.
  • Açık ve koyu tablo varyantlarının yanı sıra, tema renkleri $table-bg-leveldeğişken tarafından aydınlatılır.