Markup table yang didukung bootstrap
Berikut adalah data HTML Tabel markup yang didukung oleh bootstrap dan bagaimana sebaiknya mereka digunakan didalam bootstrap. Adapun contoh struktur HTML markup untuk tabel yang didukung Bootstrap sebagai berikut.
<table class="table">
<caption></caption>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>| No | Tag | Keterangan |
|---|---|---|
| 1 | <table> | Membungkus element - element untuk menampilkan data dalam bentuk tabular |
| 2 | <thead> | Element container untuk baris judul kolom |
| 3 | <tbody> | Element container untuk baris tabel dibagian body |
| 4 | <tr> | Elemen container untuk sekumpulan sel-sel tabel ditampilkan dalam satu baris |
| 5 | <td> | Sel tabel standar |
| 6 | <th> | Sel tabel yang khusus digunakan untuk judul kolom |
| 7 | <caption> | Keterangan tentang tabel tersebut |
Style dasar markup table
Untuk style dasar bagi tabel, cukup tambahkan class .table ke dalam tag <table>
Contoh:
<table class="table">
...
</table>Pada tabel diatas kita bisa melihat bahwa style dasar untuk tabel di bootstrap tidak mempunya border, hanya garis pemisah baris, agar bisa tampil lebih cantik dan ciamik, maka kita harus menambahkan class-class lain atau class tambahan
Class tambahan untuk markup tabel
Untuk mempercantik tampilan tabel, Bootstrap memiliki class-class tambahan yang bisa diterapkan pada tag <table> dan tag <tr> untuk mempercantik baris per baris. Daftar class-class tambahan bisa dilihat pada tabel dibawah ini:
| No | Class | Keterangan |
|---|---|---|
| 1 | .table-striped | menghasilkan tampilan belang zebra (tidak berjalan di IE7 dan IE8) |
| 2 | .table-bordered | Membuat table border |
| 3 | .table-hover | Memberikan effek pada saat hover di baris |
| 4 | .table-condensed | Menghilangkan cell padding jadi setengahnya |
| 5 | .table-responsive | Untuk menghasilkan tabel yang bisa digulung |
| 6 | .active | Memberikan warna pada baris yang sama dengan warna saat hover ke baris |
| 7 | .succes | Untuk menampilkan tindakan positive ataupun yang berhasil |
| 8 | .info | Untuk menunjukan perubahan atau aksi yang netral |
| 9 | .warning | Untuk menampilkan perigatan yang mungkin membutuhkan tindak lanjut |
| 10 | .danger | Menunjukan tindakan yang berpotensi bahaya ataupun hasilnya negative |
Berikut contoh skrip markup tabel yang menggunakan class-class tambahan.
<table class="table table-bordered table-striped table-hover ">
<caption>Data User</caption>
<thead>
<tr>
<th>#</th>
<th>Nama</th>
<th>User ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Vandal Savage</td>
<td>91223</td>
</tr>
<tr>
<td>2</td>
<td>Hawkman</td>
<td>15792</td>
</tr>
<tr>
<td>3</td>
<td>Hawkgirl</td>
<td>91912</td>
</tr>
<tr>
<td>4</td>
<td>Atom</td>
<td>55379</td>
</tr>
<tr>
<td>5</td>
<td>Firestrom</td>
<td>73675</td>
</tr>
<tr class="warning">
<td>6</td>
<td>Athharkautsar (memakai class="warning")</td>
<td>84749</td>
</tr>
<tr class="active">
<td>7</td>
<td>Rip Hunter (memakai class .active)</td>
<td>75219</td>
</tr>
<tr class="info">
<td>8</td>
<td>Barry Allen (memakai class .info)</td>
<td>49150</td>
</tr>
<tr class="success">
<td>9</td>
<td>Oliver Queen (memakai class .success)</td>
<td>55370</td>
</tr>
<tr class="danger">
<td>10</td>
<td>Leonard Snart (memakai class .danger)</td>
<td>97129</td>
</tr>
</tbody>
</table>Catatan:Cukup segitu untuk artikel Membuat tabel dengan bootstrap, setelah kalian mempelajari cara membuat tabel dengan bootstrap kalian pasti menemukan apa kelebihan bootstrap dalam hal design interface website/blog.
Pada bootstrap 3.3.7 belum ada class untuk membuat judul kolom atau isi sel rata tengah (align-center) dan rata kanan (align-right). Untuk mendapatkan hal tersebut, maka kalian harus menambahkan style sendiri.
