Membuat Tabel pada Bootstrap 4

Tabel Dasar pada Bootstrap 4 memiliki Padding yang lebih tipis dan garis pembatas Horizontal. Untuk membuat tabel, kita dapat menggunkan Class .table. Berikut adalah Contohnya:

Tabel Bootstrap
Lihat kode di Github | Lihat Live Demo



Tabel Striped

Class .table-striped berfungsi untuk membuat tabel berwarna garis-garis (Striped) seperti warna Zebra. Berikut adalah contohnya:

 Tabel Striped
Lihat kode di Github | Lihat Live Demo

Tabel Border

Class .table-bordered berfungsi untuk membuat garis tepi (Border) pada semua sisi Tabel dan Cell. Berikut adalah contohnya:

Tabel Border
Lihat kode di Github | Lihat Live Demo

Tabel Hover

Class .table-hover berfungsi untuk menambahkan efek hover (Background berwarna abu-abu) pada Tabel Row. Berikut adalah contohnya:

Tabel Hover
Lihat kode di Github | Lihat Live Demo

Tabel Dark/Gelap

Class .table-dark berfungsi untuk membuat warna Background pada tabel menjadi berwarna Dark/Gelap. Berikut adalah contohnya:

Tabel Dark/Gelap
Lihat kode di Github | Lihat Live Demo

Tabel Dark/Gelap Striped

Untuk membuat Tabel Dark/Gelap Stripe, kita dapat mengkombinasikan .table-dark dan .table-striped. Berikut adalah contohnya:

Tabel Dark/Gelap Striped
Lihat kode di Github | Lihat Live Demo

Tabel Dark/Gelap Hover

Untuk membuat Tabel Dark/Gelap Hover, kita dapat mengkombinasikan .table-dark dan .table-hover. Berikut adalah contohnya:

Tabel Dark/Gelap Hover
Lihat kode di Github | Lihat Live Demo

Tabel Tanpa Border

Untuk membuat tabel tanpa garis tepi (Borderless), kita dapat menggunakan Class .table-borderless. Berikut adalah contohnya:

Tabel Tanpa Border
Lihat kode di Github | Lihat Live Demo

Tabel dengan Class Konteks

Kita juga dapat menggunakan Class Konteks untuk mengatur warna elemen Table <table>, Table Row <tr>, dan Table Cell <td> . Berikut adalah contohnya:

Tabel dengan Class Konteks
Lihat kode di Github | Lihat Live Demo

Class konteks yang dapat kita gunakan antara lain:

ClassKeterangan
.table-primaryBiru: Menandakan tindakan penting
.table-successHijau: Menandakan keberhasilan atau tindakan positif
.table-dangerMerah: Menandakan bahaya atau tindakan yang negatif
.table-infoBiru terang: Menandakan hal yang informatif atau tindakan
.table-warningOrange: Menandakan bahaya atau tindakan yang perlu diperhatikan
.table-activeAbu-Abu: Biasanya di tetapkan pada warna hover untuk Row atau Cell
.table-secondaryAbu-Abu: Menandakan tidakan yang kurang penting
.table-lightAbu-Abu Terang: Biasanya digunakan untuk warna Background Tabel atau Row
.table-darkAbu-Abu gelap: Biasanya digunakan untuk warna Background Tabel atau Row

Warna Head pada Tabel

Kita dapat menggunakan Class .thead-dark untuk membuat Background Heading pada Tabel menjadi berwarna dark/gelap, sedangkan Class .thead-light berguna untuk membuat Background Heading Tabel menjadi berwarna Abu-Abu. Berikut adalah contohnya:

Warna Head pada Tabel
Lihat kode di Github | Lihat Live Demo

Tabel small

Kita dapat menggunakan Class .table-sm untuk membuat tabel menjadi kecil (Small) dengan mengurangi setengah dari Cell Padding. Berikut adalah contohnya:

Tabel small
Lihat kode di Github | Lihat Live Demo

Tabel Responsive

Kita dapat menggunakan Class .table-responsive untuk membuat tabel menjadi Responsive: Akan menambahkan Horizontal Scrollbar pada layar yang lebarnya kurang dari 992px (Jika diperlukan). Jika kita melihatnya pada layar yang lebarnya lebih dari 992px, maka hasilnya akan seperti biasa. Berikut adalah contohnya:

Tabel Responsive

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

Lihat kode di Github | Lihat Live Demo

Kalian juga dapat mengaturnya sendiri tergantung pada lebar layar:

ClassLebar Layar
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px

0 Komentar