Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Tabel

Dokumentasi dan contoh untuk gaya tabel opt-in (mengingat penggunaannya yang lazim di plugin JavaScript) dengan Bootstrap.

Di halaman ini

Ringkasan

Karena meluasnya penggunaan <table>elemen di widget pihak ketiga seperti kalender dan pemilih tanggal, tabel Bootstrap dipilih . Tambahkan kelas dasar .tableke any <table>, lalu perluas dengan kelas pengubah opsional atau gaya kustom kami. Semua gaya tabel tidak diwarisi di Bootstrap, artinya setiap tabel bersarang dapat ditata secara independen dari induknya.

Menggunakan markup tabel paling dasar, inilah .tabletampilan tabel berbasis di Bootstrap.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<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>

Varian

Gunakan kelas kontekstual untuk mewarnai tabel, baris tabel, atau sel individual.

Kelas Menuju Menuju
Bawaan Sel Sel
Utama Sel Sel
Sekunder Sel Sel
Kesuksesan Sel Sel
Bahaya Sel Sel
Peringatan Sel Sel
Info Sel Sel
Lampu Sel Sel
Gelap Sel Sel 
<!-- 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>
Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.

Meja beraksen

Baris bergaris

Gunakan .table-stripeduntuk menambahkan zebra-striping ke baris tabel mana pun dalam file <tbody>.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-striped">
  ...
</table>

Kolom bergaris

Gunakan .table-striped-columnsuntuk menambahkan zebra-striping ke kolom tabel mana pun.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-striped-columns">
  ...
</table>

Kelas-kelas ini juga dapat ditambahkan ke varian tabel:

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-dark table-striped">
  ...
</table>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-dark table-striped-columns">
  ...
</table>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-success table-striped">
  ...
</table>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-success table-striped-columns">
  ...
</table>

Baris yang dapat dilayangkan

Tambahkan .table-hoveruntuk mengaktifkan status hover pada baris tabel dalam file <tbody>.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-hover">
  ...
</table>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-dark table-hover">
  ...
</table>

Baris yang dapat dilayangkan ini juga dapat digabungkan dengan varian baris bergaris:

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-striped table-hover">
  ...
</table>

Tabel aktif

Sorot baris tabel atau sel dengan menambahkan .table-activekelas.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<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>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<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>

Bagaimana cara kerja varian dan tabel beraksen?

Untuk tabel beraksen ( baris bergaris , kolom bergaris , baris melayang , dan tabel aktif ) , kami menggunakan beberapa teknik untuk membuat efek ini berfungsi untuk semua varian tabel kami :

  • Kita mulai dengan mengatur latar belakang sel tabel dengan --bs-table-bgproperti kustom. Semua varian tabel kemudian menyetel properti khusus itu untuk mewarnai sel tabel. Dengan cara ini, kita tidak mendapat masalah jika warna semi-transparan digunakan sebagai latar belakang tabel.
  • Kemudian kita menambahkan bayangan kotak inset pada sel tabel dengan box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);lapisan di atas yang ditentukan background-color. Karena kita menggunakan spread besar dan tidak blur, warnanya akan monoton. Karena --bs-table-accent-bgtidak disetel secara default, kami tidak memiliki bayangan kotak default.
  • Ketika salah satu .table-striped, .table-striped-columns, .table-hoveratau .table-activekelas ditambahkan, --bs-table-accent-bgitu diatur ke warna semitransparan untuk mewarnai latar belakang.
  • Untuk setiap varian tabel, kami menghasilkan --bs-table-accent-bgwarna dengan kontras tertinggi tergantung pada warna itu. Misalnya, warna aksen untuk .table-primarylebih gelap sedangkan .table-darkmemiliki warna aksen yang lebih terang.
  • Warna teks dan batas dihasilkan dengan cara yang sama, dan warnanya diwarisi secara default.

Di balik layar terlihat seperti ini:

@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));
    $border-color: mix($color, $background, percentage($table-border-factor));

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

    color: var(--#{$prefix}table-color);
    border-color: var(--#{$prefix}table-border-color);
  }
}

Batas meja

Tabel berbatas

Tambahkan .table-bordereduntuk batas di semua sisi tabel dan sel.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-bordered">
  ...
</table>

Utilitas warna perbatasan dapat ditambahkan untuk mengubah warna:

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-bordered border-primary">
  ...
</table>

Tabel tanpa batas

Tambahkan .table-borderlessuntuk tabel tanpa batas.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-borderless">
  ...
</table>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-dark table-borderless">
  ...
</table>

Meja kecil

Tambahkan .table-smuntuk membuatnya .tablelebih kompak dengan memotong semua sel menjadi paddingdua.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-sm">
  ...
</table>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-dark table-sm">
  ...
</table>

Pembagi grup meja

Tambahkan batas yang lebih tebal, lebih gelap di antara grup tabel— <thead>, <tbody>, dan <tfoot>—dengan .table-group-divider. Sesuaikan warna dengan mengubah border-top-color(yang saat ini kami tidak menyediakan kelas utilitas untuk saat ini).

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia
html 
<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 class="table-group-divider">
    <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>

Perataan vertikal

Sel tabel <thead>selalu vertikal sejajar ke bawah. Sel tabel <tbody>mewarisi perataannya dari <table>dan disejajarkan ke atas secara default. Gunakan kelas perataan vertikal untuk menyelaraskan kembali jika diperlukan.

Pos 1 Pos 2 Pos 3 Pos 4
Sel ini mewarisi vertical-align: middle;dari tabel Sel ini mewarisi vertical-align: middle;dari tabel Sel ini mewarisi vertical-align: middle;dari tabel Ini di sini adalah beberapa teks placeholder, dimaksudkan untuk mengambil sedikit ruang vertikal, untuk menunjukkan bagaimana perataan vertikal bekerja di sel sebelumnya.
Sel ini mewarisi vertical-align: bottom;dari baris tabel Sel ini mewarisi vertical-align: bottom;dari baris tabel Sel ini mewarisi vertical-align: bottom;dari baris tabel Ini di sini adalah beberapa teks placeholder, dimaksudkan untuk mengambil sedikit ruang vertikal, untuk menunjukkan bagaimana perataan vertikal bekerja di sel sebelumnya.
Sel ini mewarisi vertical-align: middle;dari tabel Sel ini mewarisi vertical-align: middle;dari tabel Sel ini sejajar dengan bagian atas. Ini di sini adalah beberapa teks placeholder, dimaksudkan untuk mengambil sedikit ruang vertikal, untuk menunjukkan bagaimana perataan vertikal bekerja di sel sebelumnya. 
<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>

Bersarang

Gaya batas, gaya aktif, dan varian tabel tidak diwarisi oleh tabel bertingkat.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
Tajuk Tajuk Tajuk
SEBUAH Pertama Terakhir
B Pertama Terakhir
C Pertama Terakhir
3 Larry burung @Indonesia 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Cara kerja bersarang

Untuk mencegah gaya apa pun bocor ke tabel bersarang, kami menggunakan >pemilih kombinator anak ( ) di CSS kami. Karena kita perlu menargetkan semua tds dan ths di thead, tbody, dan tfoot, selektor kita akan terlihat cukup panjang tanpanya. Karena itu, kami menggunakan pemilih yang tampak agak aneh .table > :not(caption) > * > *untuk menargetkan semua tds dan ths dari .table, tetapi tidak ada tabel bersarang yang potensial.

Perhatikan bahwa jika Anda menambahkan <tr>s sebagai anak langsung dari tabel, itu <tr>akan dibungkus dengan a <tbody>secara default, sehingga membuat penyeleksi kita berfungsi sebagaimana dimaksud.

Ilmu urai

Kepala meja

Mirip dengan tabel dan tabel gelap, gunakan kelas pengubah .table-lightatau .table-darkuntuk membuat <thead>s tampak abu-abu terang atau gelap.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @Indonesia 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @Indonesia 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Kaki meja

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @Indonesia
catatan kaki catatan kaki catatan kaki catatan kaki 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Keterangan

A <caption>berfungsi seperti heading untuk sebuah tabel. Ini membantu pengguna dengan pembaca layar untuk menemukan tabel dan memahami tentang apa itu dan memutuskan apakah mereka ingin membacanya.

Daftar pengguna
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry si Burung @Indonesia 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Anda juga bisa meletakkannya <caption>di atas meja dengan .caption-top.

Daftar pengguna
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @Indonesia
html 
<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>

Tabel responsif

Tabel responsif memungkinkan tabel digulir secara horizontal dengan mudah. Jadikan tabel apa pun responsif di semua viewports dengan membungkusnya .tabledengan .table-responsive. Atau, pilih breakpoint maksimum yang dapat digunakan untuk membuat tabel responsif dengan menggunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Kliping/pemotongan vertikal

Tabel responsif memanfaatkan overflow-y: hidden, yang memotong konten apa pun yang melampaui tepi bawah atau atas tabel. Secara khusus, ini dapat memotong menu dropdown dan widget pihak ketiga lainnya.

Selalu responsif

Di setiap breakpoint, gunakan .table-responsiveuntuk menggulir tabel secara horizontal.

# Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju
1 Sel Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel Sel 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Spesifik titik putus

Gunakan .table-responsive{-sm|-md|-lg|-xl|-xxl}seperlunya untuk membuat tabel responsif hingga breakpoint tertentu. Dari breakpoint itu dan ke atas, tabel akan berperilaku normal dan tidak menggulir secara horizontal.

Tabel ini mungkin tampak rusak hingga gaya responsifnya diterapkan pada lebar area pandang tertentu.

# Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel
# Menuju Menuju Menuju Menuju Menuju Menuju Menuju Menuju
1 Sel Sel Sel Sel Sel Sel Sel Sel
2 Sel Sel Sel Sel Sel Sel Sel Sel
3 Sel Sel Sel Sel Sel Sel Sel Sel 
<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>

Kelancangan

Variabel

$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:                 var(--#{$prefix}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:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

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

$table-bg-scale:              -80%;

Lingkaran

$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,
);

Menyesuaikan

  • Variabel faktor ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) digunakan untuk menentukan kontras pada varian tabel.
  • Terlepas dari varian tabel terang & gelap, warna tema diringankan oleh $table-bg-scalevariabel.