Bootrap 5 Tabel

Tabel dasar

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

.table Tambahkan gaya dasar ke tabel:

Contoh

Coba sendiri

Baris bintik

.table-striped Tambahkan bintik kenaikan ke tabel:

Contoh

Coba sendiri

Tabel dengan bingkai

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

Contoh

Coba sendiri

Baris dengan efek hover

.table-hover Tambahkan efek hover (warna latar abu-abu) ke baris tabel:

Contoh

Coba sendiri

Tabel hitam/gelap

.table-dark Tambahkan latar belakang hitam ke tabel:

Contoh

Coba sendiri

Tabel dengan garis gelap

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

Contoh

Coba sendiri

Tabel gelap yang dapat dihover

.table-hover Tambahkan efek hover (warna latar abu-abu) ke baris tabel:

Contoh

Coba sendiri

Tabel tanpa bingkai

.table-borderless Hapus bingkai dari tabel:

Contoh

Coba sendiri

Kelas konteks

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

Contoh

Coba sendiri

Kelas konteks yang tersedia:

Kelas Penerangan
.table-primary Biru: menunjukkan tindakan penting.
.table-success Hijau: menunjukkan kesuksesan atau tindakan positif.
.table-danger Merah: menunjukkan bahaya atau tingkah laku negatif potensial.
.table-info Biru cerah: menunjukkan perubahan informasi neutral atau tindakan.
.table-warning Kuning: menunjukkan peringatan yang mungkin perlu dihatikan.
.table-active Gelap: menerapkan warna henggaman kepada baris tabel atau sel tabel.
.table-secondary Gelap: menunjukkan tindakan yang kurang penting.
.table-light Latar belakang tabel cerah atau latar belakang baris tabel.
.table-dark Latar belakang tabel gelap atau latar belakang baris tabel.

Warna tajuk tabel

Anda juga boleh menggunakan mana-mana kelas konteks hanya untuk menambah warna latar bagi tajuk tabel:

Contoh

Coba sendiri

Tabel kecil

.table-sm Kelas mengurangkan isian sel selamanya untuk memperkecil tabel:

Contoh

Coba sendiri

Tabel bergerak

.table-responsive Kelas menambah palang gerak kepada tabel semasa diperlukan (apabila ia terlalu besar secara arah horizontal):

Contoh

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

Coba sendiri

Anda juga boleh memutuskan apabila tabel sepatutnya mendapatkan palang gerak, bergantung kepada 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