Bootstrap merupakan framework CSS yang sangat responsive mudah diimplementasikan dengan desain yang menarik dan compatible dengan berbagai jenis browser baik browser yang ada di PC Desktop maupun browser yang ada di perangkat lain seperti Smartphone, IPhone, Mobile dll. Dalam tutorial singkat mengenal elemen responsive table pada bootstrap 3.3.1 ini menjelaskan secara singkat mengenai pembuatan tabel menggunakan framework bootstrap versi 3.3.1
Berikut sedikit penjelasan mengenai Elemen – Elemen penting dalam mendisain tabel yang lebih rsponsive dan lebih interaktif.
Tabel Standar
Untuk membuat tabel standar versi bootstrap, cukup menambahkan class .table
pada setiap tabel yang ada.
[sourcecode language=”html”]
<div class=”container”>
<h2>Tabel Data Mahasisa</h2>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”table”>
<tr>
<th width=”7%” scope=”col”>No</th>
<th width=”14%” scope=”col”>NIM</th>
<th width=”17%” scope=”col”>Nama</th>
<th width=”12%” scope=”col”>Jurusan</th>
<th width=”12%” scope=”col”>Kelas</th>
<th width=”12%” scope=”col”>Dosen Wali</th>
<th width=”7%” scope=”col”>Semester</th>
<th width=”19%” scope=”col”>Aksi</th>
</tr>
<tr>
<td>1</td>
<td>001</td>
<td>Bayu</td>
<td>MI</td>
<td>A</td>
<td>Jagungodak</td>
<td>5</td>
<td><a href=”3″><label class=”btn btn-info” >Edit</label></a> <a href=”3″><label class=”btn btn-danger” >Delete</label></a></td>
</tr>
<tr>
<td>2</td>
<td>002</td>
<td>Ani</td>
<td>KA</td>
<td>A</td>
<td>Jagungodak</td>
<td>5</td>
<td><a href=”3″><label class=”btn btn-info” >Edit</label></a> <a href=”3″><label class=”btn btn-danger” >Delete</label></a> </td>
</tr>
<tr>
<td>3</td>
<td>003</td>
<td>Ayu</td>
<td>MI</td>
<td>A</td>
<td>Jagungodak</td>
<td>5</td>
<td><a href=”3″><label class=”btn btn-info” >Edit</label></a> <a href=”3″><label class=”btn btn-danger” >Delete</label></a> </td>
</tr>
<tr>
<td>4</td>
<td>004</td>
<td>Dian</td>
<td>KA</td>
<td>B</td>
<td>Jagungodak</td>
<td>5</td>
<td><a href=”3″><label class=”btn btn-info” >Edit</label></a> <a href=”3″><label class=”btn btn-danger” >Delete</label></a> </td>
</tr>
<tr>
<td>5</td>
<td>005</td>
<td>Fitra</td>
<td>TK</td>
<td>B</td>
<td>Jagungodak</td>
<td>5</td>
<td><a href=”3″><label class=”btn btn-info” >Edit</label></a> <a href=”3″><label class=”btn btn-danger” >Delete</label></a> </td>
</tr>
<tr>
<td>6</td>
<td>006</td>
<td>Afif</td>
<td>TK</td>
<td>B</td>
<td>Jagungodak</td>
<td>5</td>
<td><a href=”3″><label class=”btn btn-info” >Edit</label></a> <a href=”3″><label class=”btn btn-danger” >Delete</label></a> </td>
</tr>
</table>
</div>
[/sourcecode]
Striped rows
Striped Rows digunakan untuk membedakan background baris ganjil dengan baris genap. Tambahkan .table-striped
pada tag tabel diatas sehingga menjadi :
Bordered table
Untuk membuat tabel bergaris pada setiap baris dan kolom tambahkan .table-border
Hasil:
Hover Rows
Untuk mengaktifkan Hover background pada tabel tambahkan .table-hover
Hasil:
Contextual classes
Contextual Classes digunakan untuk memberi warna-warna tertentu pada baris maupun cel. Jenis-jenis warna dapat dibedakan dengan .active
, .success
,.info
,.warning
dan .danger
Class diatas dapat diletakan didalam tag <td> maupun tag <th> perhatikan implementasinya seperti dibawah:
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Responsive Table
Tabel yang responsive merupakan tabel yang dinamis dapat ditampilkan disemua ukuran layar baik yang ukuran 736px keatas maupun kebawah seperti layar mobile yang lebih kecil. Tampilan tabel dapat discrool secara vertical maupun horizontal. Untuk dapat membuat tabel yang responsive maka class .table
haris diletakan didalam tag
dengan class .table-responsive
.
Perhatikan Kode berikut:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Sampai disini sedikit tips membuat tabel responsive menggunakan bootstrap semoga memiliki manfaat.