Tutorial Bootstrap Part 4 : Membuat Tabel Bootstrap

Assalamu'alaikum W. W

Abdul Hafid Gunawan - Hai sobat setia SC Blog, kali ini saya akan membahas tentang membuat tabel dengan bootstrap.

PENGERTIAN

SleepingCodings - Tabel ialah Sebuah alat untuk menampilkan informasi dalam bentuk matriks.

CLASS YANG TERSEDIA 

1. .table = Bentuknya tabel tanpa adanya border

2. .table-striped = Memberikan efek belang - belang pada row tabel

3. .table-bordered = Memberikan border pada tabel

4. .table-hover = Memberikan efek / animasi sentuhan saat di sentuh

dan untuk membuat pewarnaan pada row atau table data anda dapat menggunakan class-class berikut ini yang dapat anda tambahkan pada tag <tr> untuk memberi warna pada table row, atau tambahkan pada tag <td> untuk memberi warna pada table data :

- .success

.class ini di gunakan untuk memberi warna hijau di tabel row atau tabel data

- .danger

.class ini di gunakan untuk memberi warna merah di tabel row atau tabel data

- .info

.class ini di gunakan untuk memberi warna biru di tabel row atau tabel data

- .warning

.class ini di gunakan untuk memberi warna kuning di tabel row atau tabel data

CARA MEMBUAT TABEL DENGAN BOOTSTRAP

Ini contoh codingan & hasilnya ketika di jalankan di web browser.

Pada gambar di atas, karena menggunakan class .table maka tidak di berikan border di setiap coloumnnya.

CARA MEMBUAT TABEL BORDER

Pada gambar di atas, sudah menggunakan class .table-bordered dan alhasil memiliki border di setiap coloumnnya.

CARA MEMBUAT TABEL STRIP

 

Pada gambar di atas, merupakan perpaduan dari class .table-bordered dengan .table-striped dan menjadi belang-belang dari setiap rownya.


CARA MEMBUAT TABLE RESPONSIVE

Pada gambar di atas, merupakan perpaduan antara class .table, .table-bordered, .table-striped, .table-hover. Yang memiliki fungsionalitas yang sangat efisien dan responsive.

KESIMPULAN
Jadi untuk membuat table yang responsive lebih gampang menggunakan bootstrap, karena kita tinggal memanggil classnya saja & sangat menghemat waktu bukan ?.

Wassalamu'alaikum W. W