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
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
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
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:
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 |
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>