Cara Membuat dan Mendesain Table Pada Bootstrap

15 Aug 2016 15:58 3999 Hits 1 Comments
Bootstrap memudahkan kita dalam membuat dan mendesain sebuah tabel.

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.

Tags Web Bootstrap

About The Author

Rijwan 42
Ordinary

Rijwan

Saya merupakan anak RPL yang bercita - cita membangun web sendiri juga menjadi ahli pemrograman serta komputer.

Comments

You need to be logged in to be able to post a comment. Click here to login
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel