Tabel Bootstrap 5

Tabel dasar

Tabel Bootstrap 5 dasar memiliki margin dalam sedikit dan garis pemisah horizontal.

.table Tambah gaya dasar ke tabel:

Contoh

Coba Sendiri

Baris berwarna

.table-striped Tambah garis zebra ke tabel:

Contoh

Coba Sendiri

Tabel dengan bingkai

.table-bordered Tambah bingkai ke semua sisi tabel dan sel:

Contoh

Coba Sendiri

Baris dengan efek hover

.table-hover Tambah efek hover (latar belakang abu-abu) ke baris tabel:

Contoh

Coba Sendiri

Tabel hitam/diangin

.table-dark Tambah latar belakang hitam ke tabel:

Contoh

Coba Sendiri

tabel dengan garis berwarna gelap

gabungkan .table-dark dan .table-striped Untuk membuat tabel dengan garis berwarna gelap:

Contoh

Coba Sendiri

Tabel berwarna gelap yang dapat dihover

.table-hover Tambah efek hover (latar belakang abu-abu) ke baris tabel:

Contoh

Coba Sendiri

Tabel tanpa bingkai

.table-borderless Hapus garis bingkai tabel dari tabel:

Contoh

Coba Sendiri

Kelas konteks

Kelas konteks dapat digunakan untuk seluruh tabel (<table>) baris tabel (<tr>) atau sel tabel (<td>) warna.

Contoh

Coba Sendiri

Kelas konteks yang tersedia:

Kelas Deskripsi
.table-primary Biru: Menunjukkan tindakan penting.
.table-success Hijau: Menunjukkan tindakan sukses atau positif.
.table-danger Merah: Menunjukkan bahaya atau tindakan negatif yang potensial.
.table-info Biru terang: Menunjukkan perubahan informasi netral atau operasi.
.table-warning Kuning: Menunjukkan peringatan yang perlu dicatat.
.table-active Abu-abu: Menggunakan warna hover untuk baris tabel atau sel tabel.
.table-secondary Abu-abu: Menunjukkan tindakan yang kurang penting.
.table-light Tabel putih atau latar baris tabel terang.
.table-dark Tabel abu-abu atau latar baris tabel gelap.

Warna Judul Tabel

Anda juga dapat menggunakan kelas konteks apapun hanya untuk menambahkan warna latar ke judul tabel:

Contoh

Coba Sendiri

Tabel Kecil

.table-sm Kelas mengurangi ukuran tabel dengan mengurangi pengisi selusin seluruhnya:

Contoh

Coba Sendiri

Tabel Respon

.table-responsive Kelas menambahkan batang gerak ke tabel saat diperlukan (kapan tabel terlalu besar di arah horisontal):

Contoh

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

Coba Sendiri

Anda juga dapat menentukan kapan tabel harus memperoleh batang gerak, tergantung pada lebar layar:

Kelas Lebar Layar
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Contoh

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

Coba Sendiri