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

İşaret

Otto

@mdo

başlık	başlık	başlık
A	Öncelikle	Son
B	Öncelikle	Son
C	Öncelikle	Son

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.