MEMBUAT TABLE DI BOOTSTRAP

Di dalam website, table digunakan untuk menyajikan data dan juga informasi agar tersusun lebih terstruktur. Selain table, dalam sebuah website terkadang disertakan juga penyajian data dalam bentuk grafik supaya lebih menarik dan mempermudah pengunjung dalam memahami informasi yang diberikan.

1. Class Table

Bootstrap menyediakan beberapa class yang dapat digunakan dalam table atau tag <table>. Class-class tersebut adalah:

1. Table

Class table termasuk class default. jadi tampilanya sama dengan table biasa, tetapi class table harus disertakan ketika menggunakan class CSS Bootstrap.

2. Table-stripped

Class untuk menampilkan tabel dengan format 'belang-belang' atau warna barisnya berbeda (strip).

3. Table-bordered

Class untuk membuat garis, border (bingung) pada sebuah table.

4. Table-condensed

Class untuk membuat baris pada table lebih ramping dan menyesuaikan dengan ukuran isi table.

5. Table-hover

Class untuk membuat table berubah warna pada setiap barisnya ketika kursor berada di atas baris.

2. Penggunaan class table

Penggunaan class untuk membuat table dengan Bootstrap sebagai berikut :

Baris ke-10 kita gunakan clas table disertai table-bordered untuk membuat border, class table-striped untuk membuat table berbeda warna tiap barisnya (belang), dan class table-hover agar warna tiap baris tabel akan berubah ketika kursor berada di atasnya.

Hasil ketika ditampilan pada browser adalah:

3. Mengubah Warna Baris pada Table 

Selanjutnya, kita menggunakan class Bootstrap untuk mengubah warna baris pada table. Contoh penggunaan classnya sebagai beriku :

Pada contoh di atas, class-class Bootstrap pada <table> masih sama dengan contoh sebelumnya.Perbedaanya, di sini sudah kita tambahkan class info, success, danger warning, dan active pada setiap barisnya. Cara penggunaan class-class Bootstrap pada baris table dapat dilihat dalam tag <tr> atau pada browser seperti gambar berikut :