Membuat table pada HTML memerlukan waktu lebih lama ketimbang menggunakan framework Bootstrap, Bootstrap telah menyediakan beberapa class yang dapat digunakan dalam membangun table di blog / web. Masalahnya, kamu harus tau dan mengerti class-class tersebut.
Berikut ini class-class yang disediakan Bootstrap untuk membuat table:
Basic Table
Untuk membuat table dengan cepat pada Bootstrap hanya memerlukan class table, ini juga sebagai dasar table Bootstrap.
<table class="table">
<thead>
<tr>
<th>Domain</th>
<th>Negara</th>
<th>Nomor Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td>posciety.com</td>
<td>Indonesia</td>
<td>+62</td>
</tr>
<tr>
<td>posciety.com</td>
<td>Indonesia</td>
<td>+62</td>
</tr>
</tbody>
</table>
Hasilnya akan terlihat seperti ini:
Baca Juga:
Responsive Table
Jika ingin membuat table responsive Bootstrap, gunakan class table-responsive seperti ini:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>NO</th>
<th>Benua</th>
<th>Negara</th>
<th>Pulau</th>
<th>Provinsi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ASIA</td>
<td>Indonesia</td>
<td>Jawa</td>
<td>Jawa Barat</td>
</tr>
<tr>
<td>2</td>
<td>ASIA</td>
<td>Indonesia</td>
<td>Sumatera</td>
<td>Bengkulu</td>
</tr>
</tbody>
</table>
</div>
Pada contoh di atas menggunakan div sebagai induk table, beberapa pengembang juga biasanya meletakkan class table-reponsive langsung di dalam tag table bersamaan dengan class table. Hasilnya sama aja akan terlihat seperti ini:
Untuk membuktikan responsive nya, ubahlah ukuran website kamu ke ukuran lain seperti ukuran tablet / HP.
Table Berwarna
Bawaan table itu berwarna dasar putih atau polos tanpa garis penuh sisi, kamu dapat memberikan warna pada setiap baris bahkan warna yang berbeda-beda dengan menggunakan contextual class yang pernah dibahas sebelumnya pada postingan tentang memberi warna pada tulisan dan memberi warna background pada tulisan.
<h2>Table Bootstrap Berwarna - Posciety</h2>
<table class="table">
<thead>
<tr>
<th>Warna</th>
<th>class</th>
<th>Situs</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>-</td>
<td>posciety.com</td>
</tr>
<tr class="success">
<td>Hijau</td>
<td>success</td>
<td>posciety.com</td>
</tr>
<tr class="danger">
<td>Merah</td>
<td>danger</td>
<td>posciety.com</td>
</tr>
<tr class="info">
<td>Biru</td>
<td>info</td>
<td>posciety.com</td>
</tr>
<tr class="warning">
<td>Kuning/Orange</td>
<td>warning</td>
<td>posciety.com</td>
</tr>
<tr class="active">
<td>Gelap / Pudar</td>
<td>Aktif</td>
<td>posciety.com</td>
</tr>
</tbody>
</table>
Ini adalah warna dari kontekstual class Bootstrap, kamu dapat menyesuaikan warna lain jika ingin warna yang berbeda. Dari kodingan di atas akan terlihat hasilnya terlihat seperti ini :
Table Bergaris (Belang)
Beberapa pengguna Bootstrap juga menggunakan class table-stiped dalam membuat table agar table gak polos banget, sedikit lebih menarik tapi masih sederhana dengan balutan warna terang dan gelap yang berbeda-beda setiap barisnya.
<h2>Striped Table Bootstrap - Posciety</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Negara</th>
<th>Identitas</th>
<th>No HP</th>
</tr>
</thead>
<tbody>
<tr>
<td>Indonesia</td>
<td>KTP</td>
<td>+62</td>
</tr>
<tr>
<td>Indonesia</td>
<td>KTP</td>
<td>+62</td>
</tr>
</tbody>
</table>
Akan tampak belang seperti Zebra:
Table Padat
Ini merupakan table Bootstrap yang dibangun tanpa jarak (padding) ditengah-tengah sehingga table tampak padat berisi. Gunakan class table-condensed untuk membangun table seperti ini di Bootstrap.
<h2>Table Tanpa Padding Bootstrap - Posciety</h2>
<table class="table table-condensed">
<thead>
<tr>
<th>Bahasa</th>
<th>Language</th>
<th>Where ?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Indonesia</td>
<td>English</td>
<td>World</td>
</tr>
<tr>
<td>Indonesia</td>
<td>English</td>
<td>World</td>
</tr>
</tbody>
</table>
Table tanpa spasi (jarak padding) diantara kotak item ini akan tampak seperti:
Table Border
Jika diperhatikan pada contoh-contoh di atas, table tersebut tidak memiliki border atau garis luaran yang menutupi table. Jika memerlukan garis border pada table Bootstrap silahkan gunakan class table-bordered.
<h2>Table Border Bootstrap - Posciety</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Negara</th>
<th>Benua</th>
</tr>
</thead>
<tbody>
<tr>
<td>Indonesia</td>
<td>Asia</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Asia</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Asia</td>
</tr>
</tbody>
</table>
Dengan kode table di atas akan tampil garis setiap item pada table seperti ini:
Hover Rows Table
Ini adalah table dengan class table-hover Boostrap yang akan berubah warna ketika disentuh (hover), warna ini sama dengan class active.
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Nama</th>
<th>Pekerjaan</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>Isyana</td>
<td>Teller</td>
<td>Bumi</td>
</tr>
<tr>
<td>Isyana</td>
<td>Teller</td>
<td>Bumi</td>
</tr>
<tr>
<td>Isyana</td>
<td>Teller</td>
<td>Bumi</td>
</tr>
</tbody>
</table>
Coba terapkan kode ini kemudia simpan dan lihat hasilnya, ketika di hover akan berwarna pada rows (baris) yang disentuh. Pastikan untuk tidak menggunakan class active pada table agar terlihat perubahan ketika hover.