Ilmututor
Belajar Bersama
Setelah membuat table tentu kita ingin mempercantiknya agar terlihat bagus dan profesional. Salah satu1 cara mempercantik table adalah dengan menggunakan Bootsrtap4 dapat di diwnload disini
Bootstrap 4 adalah versi terbaru dari Bootstrap; dengan komponen baru, stylesheet yang lebih cepat dan lebih responsif. Bootstrap 4 mendukung rilis terbaru dan stabil dari semua browser dan platform utama. Namun, Internet Explorer 9 dan ke bawah tidak didukung.
Langkah pertama yang harus kita lakukan adalah dengan bukak view table kita dan masukkan link bootsrap di dalam head tepatnya di bawah <title> kita seperti dibawah
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Tabel Bootstrap 4 dasar memiliki padding cahaya dan pembagi horizontal.Class .table menambahkan gaya dasar ke sebuah tabel:
<table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>
Tabel Bootstrap 4 dasar memiliki padding cahaya dan pembagi horizontal. Class .table menambahkan gaya dasar ke sebuah tabel:
<table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>
Class .table-bounded menambahkan batas di semua sisi tabel dan sel:
<table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>
Selanjutnya masih ada beberapa class lagi yaitu :
Penggabungan dua nama clas dilakukan dengan cara beikut :
<table class="table table-dark table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> </tbody> </table>
selanjunya mari kita coba mengenal class table pada bootstrap, ada beberapa class yang untuk table yaitu :
Class | Description |
---|---|
.table-primary | Biru: Menunjukkan tindakan penting |
.table-success | Hijau: Menunjukkan tindakan yang berhasil atau positif |
.table-danger | Merah: Menunjukkan tindakan berbahaya atau berpotensi negatif |
.table-info | Light blue: Indicates a neutral informative change or action |
.table-warning | Biru muda: Menunjukkan perubahan atau tindakan informatif yang netral |
.table-active | Abu-abu: Menerapkan warna hover ke baris tabel atau sel tabel |
.table-secondary | Abu-abu: Menunjukkan tindakan yang sedikit kurang penting |
.table-light | Tabel abu-abu terang atau latar belakang baris tabel |
.table-dark | Tabel abu-abu gelap atau latar belakang baris tabel |
Untuk cara penggunaannya sendiri, kita tambahkan clas pada <table> seperti pada contoh berikut
<table class="table table-striped">