Untuk membuat table menggunakan bootstrap caranya sangat mudah, Anda hanya perlu memasukan class – class bootstrap yang digunakan untuk memformat table.

Untuk membuat atau mendesign table dengan bootstrap, buatlah sebuah file HTML atau file PHP, contoh index.php.

Berikut adalah class – class bootstrap yang sering digunakan untuk memformat atau mendesign table.

1. Basic Table (.table)

Class ini digunakan untuk mendefinisikan atau membuat table standar atau table biasa. Untuk membuatnya cukup menambahkan class table pada tag . Contoh:

Hasilnya akan terlihat seperti berikut:

Dapat dilihat dari script diatas, kita hanya perlu menambahkan class table pada element tag .

 

2. Striped Rows (.table-striped)

Class ini berfungsi untuk membuat baris table yang berbeda (strip). Class ini termasuk class tambahan pada bootstrap.

Untuk membuat table strip seperti zebra, kita hanya perlu menambahkan class table-stripped bersamaan dengan class table. Contoh:

Hasilnya akan terlihat seperti berikut:

3. Bordered Table (.table-bordered)

Digunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk design table.

Untuk membuat table border, sama seperti table srip, kita hanya perlu menambahkan class table-bordered bersamaan dengan class table. Contoh:

Hasilnya akan terlihat seperti berikut:

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