Bootstrap 4 Tabel
Bootstrap 4 Tabel Dasar
Tabel Bootstrap 4 dasar memiliki bantalan ringan dan pembagi horizontal.
Kelas .tablemenambahkan gaya dasar ke tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Baris bergaris
Kelas .table-stripedmenambahkan garis-garis zebra ke tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabel Berbatasan
Kelas .table-borderedmenambahkan batas di semua sisi tabel dan sel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Arahkan ke Baris
Kelas .table-hovermenambahkan efek hover (warna latar belakang abu-abu) pada baris tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Meja Hitam/Gelap
Kelas .table-darkmenambahkan latar belakang hitam ke tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Meja Bergaris Gelap
Gabungkan .table-darkdan .table-stripeduntuk membuat tabel gelap bergaris:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Meja Gelap yang Dapat Dilayangkan
Kelas .table-hovermenambahkan efek hover (warna latar belakang abu-abu) pada baris tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Meja Tanpa Batas
Kelas .table-borderlessmenghapus batas dari tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Kelas Kontekstual
Kelas kontekstual dapat digunakan untuk mewarnai seluruh tabel ( <table>), baris tabel ( <tr>) atau sel tabel ( <td>).
Contoh
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
Kelas kontekstual yang bisa digunakan adalah:
| Kelas | Keterangan |
|---|---|
.table-primary |
Biru: Menunjukkan tindakan penting |
.table-success |
Hijau: Menunjukkan tindakan yang berhasil atau positif |
.table-danger |
Merah: Menunjukkan tindakan yang berbahaya atau berpotensi negatif |
.table-info |
Biru muda: Menunjukkan perubahan atau tindakan informatif yang netral |
.table-warning |
Oranye: Menunjukkan peringatan yang mungkin perlu diperhatikan |
.table-active |
Abu-abu: Menerapkan warna kursor ke baris tabel atau sel tabel |
.table-secondary |
Abu-abu: Menunjukkan tindakan yang sedikit kurang penting |
.table-light |
Meja abu-abu terang atau latar belakang baris tabel |
.table-dark |
Meja abu-abu gelap atau latar belakang baris tabel |
Warna Kepala Meja
Kelas .thead-darkmenambahkan latar belakang hitam ke header tabel, dan .thead-lightkelas menambahkan latar belakang abu-abu ke header tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Meja kecil
Kelas .table-smmembuat tabel lebih kecil dengan memotong bantalan sel menjadi dua:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabel Responsif
Kelas .table-responsivemenambahkan bilah gulir ke tabel saat dibutuhkan (ketika terlalu besar secara horizontal):
Contoh
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Anda juga dapat memutuskan kapan tabel harus mendapatkan bilah gulir, tergantung pada lebar layar:
| Kelas | Lebar layar |
|---|---|
.table-responsive-sm |
< 576 piksel |
.table-responsive-md |
< 768 piksel |
.table-responsive-lg |
<992px |
.table-responsive-xl |
< 1200px |
Contoh
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>