Tutorial Bootstrap #2: Membuat Table

Unknown   January 09, 2018   Bootstrap   1 comment  

Pada tutorial kali ini kita akan belajar mengenai cara membuat tabel dengan Bootsrap, gunanya table ini kita dapat menampung data data seperti data mahasiswa, barang, pengunjung dan data data lainnya, pada Bootstrap sendiri kita sudah disiapkan class "table", cara menggunakan cukup mudah, kita tinggal memberikan class "table" pada tag <table>, berikut syntax dasarnya.

Hasilnya dapat dilihat pada gambar berikut.

Tabel Striped

Untuk memberikan efek strip pada tabel, tambahkan class "table-striped" pada tag <table>, seperti berikut <table class="table table-striped">, hasil dapat dilihat pada gambar berikut.

Table Bordered
Untuk memberikan border pada table, tambahkan class "table-bordered", seperti berikut <table class="table table-bordered">, hasilnya dapat dilihat pada gambar berikut.

Table Responsive
Agar table menjadi responsive, buat tag <div> yang berkelas "table-responsive" dimana menjadi pembungkus tag <table>, seperti syntax berikut.

Hasilnya, dapat dilihat pada gambar dibawah ini.

Jadi, ketika ukuran browser diperkecil, maka table menjadi responsive. Bagaimana, sangat mudah bukan menggunakan Bootstrap, kita hanya menggunakan class class yang telah disediakan oleh Bootstrap.

Sampai disini dulu pembahasannya, jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tuliskan komentar anda dibawah.

Semoga Bermanfaat.