
Table HTML adalah elemen yang paling banyak digunakan dalam website. Pada dasarnya, table HTML digunakan untuk menyajikan data dalam baris dan kolom pada halaman web. Alasan untuk membuat table yang responsive adalah untuk pengalaman pengguna yang lebih baik. Jika aplikasi website kamu menggunakan Bootstrap, kamu dapat dengan mudah membuat desain table dalam satu menit. Selain itu, kamu bisa membuat table Bootstrap responsive dengan menambahkan satu Class.
Berbagai jenis contoh table berikut membantu kamu membuat table horizontal dengan styling dasar menggunakan Bootstrap.
Library Bootstrap dan jQuery perlu disertakan untuk menggunakan framework Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Table Bootstrap responsive (Dasar)
Gunakan class table
untuk menambahkan style dasar ke table HTML. Class table-responsive
akan membuat table responsive.
<table class="table table-responsive"> <thead> <tr> <th>Nama Awal</th> <th>Nama Akhir</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Bagus</td> <td>Susilo</td> <td>[email protected]</td> </tr> <tr> <td>Danang</td> <td>Waras</td> <td>[email protected]</td> </tr> <tr> <td>Cak</td> <td>Lontong</td> <td>[email protected]</td> </tr> </tbody> </table>
Table Bootstrap Responsive (Bergaris)
Gunakan class table-striped
untuk menambahkan garis-garis pada table HTML.
<table class="table table-striped table-responsive"> <thead> <tr> <th>Nama Awal</th> <th>Nama Akhir</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Bagus</td> <td>Susilo</td> <td>[email protected]</td> </tr> <tr> <td>Danang</td> <td>Waras</td> <td>[email protected]</td> </tr> <tr> <td>Cak</td> <td>Lontong</td> <td>[email protected]</td> </tr> </tbody> </table>
Table Bootstrap Responsive (Hover)
Apa itu Hover? Dalam hal ini Hover maksudnya ketika pointer mouse digerakkan diatas table maka baris table akan berubah warna atau fokus pada baris tersebut. Gunakan class table-hover
untuk menambahkan efek Hover pada table HTML.
<table class="table table-hover table-responsive"> <thead> <tr> <th>Nama Awal</th> <th>Nama Akhir</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Bagus</td> <td>Susilo</td> <td>[email protected]</td> </tr> <tr> <td>Danang</td> <td>Waras</td> <td>[email protected]</td> </tr> <tr> <td>Cak</td> <td>Lontong</td> <td>[email protected]</td> </tr> </tbody> </table>
Table Bootstrap Responsive (Bordered)
Gunakan class table-bordered
untuk menambahkan Border/garis tepi pada table HTML.
<table class="table table-bordered table-responsive"> <thead> <tr> <th>Nama Awal</th> <th>Nama Akhir</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Bagus</td> <td>Susilo</td> <td>[email protected]</td> </tr> <tr> <td>Danang</td> <td>Waras</td> <td>[email protected]</td> </tr> <tr> <td>Cak</td> <td>Lontong</td> <td>[email protected]</td> </tr> </tbody> </table>
Gampang kan vroh?