MEMBUAT TABEL MENGGUNAKAN BOOTSTRAP

Untuk membuat tabel dengan bootstrap sangat mudah , yakni dengan memanggil class-class yang terdapat dalam bootstrap.
Untuk membuat table standart / biasa kita hanya perlu memanggil class .table, contoh implementasinya sebagai berikut

<table class="table">
 <thead>
  <th>No</th>
  <th>NIM</th>
  <th>NAMA</th>
 </thead>
 <tr>
  <td>1</td>
  <td>2013141516</td>
  <td>Azmil</td>
 </tr>
 <tr>
  <td>2</td>
  <td>2013141517</td>
  <td>Ibnu</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Syaifulloh</td>
  <td>2013141518</td>
 </tr>
</table>

Hasilnya:

Untuk membuat table belang_belang (striped) cukup menambahkan .table-striped setelah .table

<table class="table table-striped">

Ada juga untuk memberi border pada table ,cukup mengganti table-striped menjadi table-bordered

table-striped

table-bordered

Ada lagi untuk membuat tabel memilliki efek hover, ketika  berada diletakan pada row table makan akan berubah warnanya. Caranya tinggal merubah .table bordered menjadi .table-hover.

Nah coba kita mengkombinasikan semuanya

<table class="table table-striped table-bordered table-hover">
 <thead>
  <th>No</th>
  <th>NIM</th>
  <th>NAMA</th>
 </thead>
 <tr>
  <td>1</td>
  <td>2013141516</td>
  <td>Azmil</td>
 </tr>
 <tr>
  <td>2</td>
  <td>2013141517</td>
  <td>Ibnu</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Syaifulloh</td>
  <td>2013141518</td>
 </tr>
</table>

dan untu memberi warna pada table, di dalam bootstrap sudah disediakan beberapa warna, dan kita cukup memanggil classnya saja. berikut warna yang disediakan
.active .success .info .warning . danger

Contoh implementasinya sebagai berikut:

<table class="table table-bordered table-hover">
 <thead>
  <th>No</th>
  <th>NIM</th>
  <th>NAMA</th>
 </thead>
 <tr class="active">
  <td>1</td>
  <td>2013141516</td>
  <td>Azmil</td>
 </tr>
 <tr calss="info">
  <td>2</td>
  <td>2013141517</td>
  <td>Ibnu</td>
 </tr>
 <tr class="warning">
  <td>3</td>
  <td>Syaifulloh</td>
  <td>2013141518</td>
 </tr>
</table>

Author : azmil

Share this

Related Posts