Kembali lagi dengan tutorial saya, kali ini saya akan membahas bagaimana membuat table yang reponsive pada blog dengan bootstrap. Seperti biasa sobat harus instal bootsrap dulu pada blog sobat, untuk yang belum tau cara instal bootstrap pada blog silahkan lihat artikel Cara Mudah Memasng Bootstrap Pada Blog.
Pada pembuatan tabel dengan bootstrap ada beberapa class yang perlu sobat ketahui, di antaranya :
- table
class ini di gunakan untuk mendefinisikan atau membuat table standar/ table biasa. - table-striped
table-striped merupakan class tambahan untuk membuat table dengan menggunakan bootstrap.class ini berfungsi untuk membuat baris table yang bergaya belang-belang (strip). - table-bordered
table-bordered di gunakan untuk membuat table yang memiliki garis dan termasuk class tambahan pada bootstrap untuk mendesign table. -
table-hover
table-hover merupakan class tambahan untuk mendesign table menggunakan bootstrap. table hover di gunakan untuk membuat efek hover pada row table pada saat cursor mouse di letakkan di atas row table.
Dan untuk membuat pewarnaan pada row atau table data sobat dapat menggunakan class-class berikut ini yang dapat sobat tambahkan pada tag <tr> untuk memberi warna pada table row, atau tambahkan pada tag <td> untuk memberi warna pada table data.
- success
class ini di gunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data. - danger
class ini di gunakan untuk memberi warna merah pada table row atau table data. - info
class ini di gunakan untuk memberi warna biru pada table row atau table data. - warning
class ini di gunakan untuk memberi warna kuning pada table row atau table data.
Berikut contoh table yang di buat dengan bootstrap, di sini saya membuat table berwarna dengan efek hover dan responsive
Untuk table di atas kalau sobat membukanya pada tablet atau handphone tampilannya akan sama, silahkan sobat gunakan kode di bawah iniuntuk membuat tabel seperti di atas tinggal sobat ganti content seperti (nama,alamat,kota,provinsi,negara) dengan kata-kata sobat.
<div class="table-responsive">
<table class="table table-hover">
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tbody>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-hover">
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tbody>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
<tr>
<td class='active'>Nama</td>
<td class='success'>Alamat</td>
<td class='warning'>Kota</td>
<td class="danger">Provinsi</td>
<td class="info">Negara</td>
</tr>
</tbody>
</table>
</div>
Bagaimana mudah bukan membuat table yang responsive dengan efek hover pada blog, dengan bootstrap sobat cukup menulis kode HTML di atas tanpa harus membuat file CSS lagi. Semoga artikelnya dapat membantu dan bermanfaat buat sobat. Terimakasih
Artikel Terkait
Artikel Terkait
