Source

Tabel

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

Contoh

Karena meluasnya penggunaan tabel di widget pihak ketiga seperti kalender dan pemilih tanggal, kami telah merancang tabel kami untuk ikut serta . Cukup tambahkan kelas dasar .tableke any <table>, lalu perluas dengan gaya khusus atau berbagai kelas pengubah yang disertakan.

Menggunakan markup tabel paling dasar, inilah .tabletampilan tabel berbasis di Bootstrap. Semua gaya tabel diwarisi dalam Bootstrap 4 , artinya setiap tabel bersarang akan ditata dengan cara yang sama seperti induknya.

# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry 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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Anda juga dapat membalikkan warna—dengan teks terang di latar belakang gelap—dengan .table-dark.

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

Opsi kepala meja

Mirip dengan tabel dan tabel gelap, gunakan kelas pengubah .thead-lightatau .thead-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
# Pertama Terakhir Menangani
1 Tanda Otto @mdo
2 Yakub Thornton @gemuk
3 Larry burung @Indonesia 
<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>

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

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

Meja 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">
  <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-borderlessjuga dapat digunakan pada meja gelap.

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

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

Meja kecil

Tambahkan .table-smuntuk membuat tabel lebih ringkas dengan memotong bantalan sel menjadi dua.

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

Kelas kontekstual

Gunakan kelas kontekstual untuk mewarnai baris tabel atau sel individual.

Kelas Menuju Menuju
Aktif Sel Sel
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 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>

Varian latar belakang tabel biasa tidak tersedia dengan tabel gelap, namun, Anda dapat menggunakan utilitas teks atau latar belakang untuk mendapatkan gaya yang serupa.

# Menuju Menuju
1 Sel Sel
2 Sel Sel
3 Sel Sel
4 Sel Sel
5 Sel Sel
6 Sel Sel
7 Sel Sel
8 Sel Sel
9 Sel Sel 
<!-- 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>
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 .sr-onlykelas.

Buat tabel responsif dengan membungkus any .tabledengan .table-responsive{-sm|-md|-lg|-xl}, membuat tabel menggulir secara horizontal pada setiap max-widthbreakpoint hingga (tetapi tidak termasuk) masing-masing 576px, 768px, 992px, dan 1120px.

Perhatikan bahwa karena browser saat ini tidak mendukung kueri konteks rentang , kami mengatasi keterbatasan min-dan max-awalan serta area pandang dengan lebar fraksional (yang dapat terjadi dalam kondisi tertentu pada perangkat dpi tinggi, misalnya) dengan menggunakan nilai dengan presisi lebih tinggi untuk perbandingan ini .

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 burung @Indonesia 
<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>

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

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}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 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# 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-md">
  <table class="table">
    ...
  </table>
</div>
# 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-lg">
  <table class="table">
    ...
  </table>
</div>
# 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-xl">
  <table class="table">
    ...
  </table>
</div>