4. Hover Rows (.table-hover)
Berguna untuk memberikan efek hover pada baris table pada saat kursor diarahkan.
Penulisannya sama seperti yang lainnya, kita hanya tinggal menulis class table-hover bersamaan dengan class table. Contoh:
Hasilnya akan terlihat seperti berikut:
5. Condensed Table (.table-condensed)
Berfungsi untuk memperkecil jarak pada table atau menghilangkan padding pada isi table. Contoh:
Hasilnya akan terlihat seperti berikut:
6. Contextual Class
Berguna untuk membuat pewarnaan pada row atau table data. Contextual Class yang digunakan adalah:
Class success
Class ini berfungsi untuk memberi warna hijau pada table row atau table data.
Class danger
Class ini berfungsi untuk memberi warna merah pada table row aatau table data.
Class info
Class ini berfungsi untuk memberi warna biru pada table row atau table data.
Class warning
Class ini berfungsi untuk memberi warna kuning pada table row atau table data.
Class active
Class ini berfungsi untuk memberikan warna baris atau sel tertentu pada table.
Class – class tersebut ditulis pada tag
atau| tag . Contoh:
Â
Hasilnya terlihat sebagai berikut:
7. Responsive Table(.table-responsive)Class ini berfungsi untuk membuat table Anda menyesuaikan dengan perangkat mobile lainnya seperti smartphone agar table Anda tetap terlihat rapi meskipun resolusi layar lebih kecil. Class ini ditulis di dalam tag .
 yang didalamnya terdapat table. Contoh:
Hasilnya akan terlihat seperti berikut:
Itulah beberapa cara untuk mendesign table menggunakan bootstrap. Bagaimana, mudah bukan? Tentu saja mudah karena kita hanya perlu memanggil class – classnya saja, jadi tidak akan sulit. Demikian artikel tutorial ini saya buat, semoga bermanfaat dan selamat mencoba. |
