Responsive table dengan Bootsrap

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.

Source Code :

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

<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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td>     </tr>   </table> </div>

Hasil :

Striped rows

Striped Rows digunakan untuk membedakan background baris ganjil dengan baris genap. Tambahkan .table-striped pada tag tabel diatas sehingga menjadi :
… Hasil :

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>

Hasil :

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.