Belajar Bootstrap Part 4 : Tabel Bootstrap

TABEL BOOTSTRAP

Assalamu'alaikum Wr. Wb

Hai sobat semua, terima kasih telah mengunjungi blog saya. Pada kesempatan kali ini kita akan lanjut materi tentang Membuat tabel menggunakan bootstrap.

Langsung saja yuk...

BOOTSTRAP TABEL DASAR
Kelas .table menambahkan styling dasar utk tabel.
Contoh :

Hasilnya :

BARIS BERGARIS (STRIPED ROWS)
Menggunakan kelas .table-striped.
Contoh :

Hasilnya :

BORDER TABEL
Menggunakan kelas .table-bordered.
Contoh :

Hasilnya :

BARIS HOVER
Menggunakan kelas .table-hover.
Contoh :

Hasilnya :

CONDENDSED TABLE
Menggunakan kelas .table-condensed.
Contoh :

Hasilnya :

KELAS KONTEKSTUAL
Kelas kontekstual dapat digunakan untuk warna baris tabel <tr> atu sel tabel <td>.
Contoh :

Hasilnya :

Kelas kontekstual yang dapat digunakan adalah :

TABEL RESPONSIF
Kelas .table-responsive membuat tabel responsif.
Contoh :

Hasilnya :

Silakan dicoba sendiri sobat. Apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.

• Kesimpulan

Dengan menggunakan bootstrap untuk pembuatan tabel jadi lebih menarik dan juga responsif.

Referensi :
http://www.w3schools.com/bootstrap/bootstrap_tables.asp

Wassalamu'alaikum Wr. Wb