Cara Menggunakan dan Membuat Tabel dengan Bootstrap

Bootstrap table pada dasarnya sama dalam pembuatannya, hanya saja disini menggunakan fasilitas bootstrap dengan macam-macam bentuk atau style dari bootstrap tersebut.

Untuk kode secara keseluruhan seperti dibawah ini, dan jika ingin mengganti style atau bentu dari masing-masing tabel, maka tambahkan class .table-striped atau .table-bordered atau .table-hover class tabel yang lain.

<table class="table">
            <thead>
                    <tr>
                     <th>kolom </th>
                        <th>kolom </th>
                        <th>kolom </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                     <td>isi satu</td>
                        <td>isi satu</td>
                        <td>isi satu</td>
                    </tr>
                </tbody>
</table>

Tabel Basic

Pada tabel yang sangat sederhana ini merupakan bentuk standar yang dibawakan oleh bootstrap dengan class .table namun memiliki garis bawah atau sering disebut divide.

Tabel Striped

Bentuk kedua dari tabel yang disodorkan oleh bootstrap dengan class .table-striped, pada tabel ini kan terlihat dengan belang-belang seperti zebra.

Tabel Bordered

Bentuk ketiga menggunakan class .table-bordered merupakan bentuk yang dipenuhi dengan garis disetiap sisi tabel dan isi tabel tersebut.

Tabel Hover 

Bentuk keempat adalah bentuk dengan class .table-hover, ketika cursor diarahkan ke tabel tersebut maka background tabel baris akan berubah.