Cara Membuat Tabel Responsive Menggunakan Bootstrap � Salam sejahtera buat teman-teman semuanya, pada tutorial kali ini kita akan mengupas tuntas mengenai tabel di bootstrap ini. Pada tutorial sebelumnya yaitu Cara Membuat Form Responsive Menggunakan Bootstrap dan kali ini, kita membuat beberapa tabel yang responsive. Pada device yang kecil atau mempunyai ukuran dibawah 768px, maka akan terdapat scroll secara horizontal. Dan ketika di lihat dengan lebih dari 768px, maka tidak terdapat perbedaan apapun.
Dalam pembuataan tabel responsive di bootstrap ini, ada beberapa class untuk membuat berbagai style atau bentuk pada tabel yang akan dibuat. Anda dapat melihatnya pada tabel dibawah untuk melihat perbedaannya.
| Class | Deskripsi |
|---|---|
| .table | Class ini membuat tabel yang sederhana dan mendasar |
| .table-striped | Membuat tampilan tabel seperti pola zebra (Tidak Mendukung IE8) |
| .table-bordered | Membuat setiap sisi tabel memiliki border |
| .table-hover | Memberikan Style hover pada tabel |
| .table-condensed | Membuat tabel menjadi lebih ringkas dengan memotong sebagian padding |
Dan dari beberapa class diatas, ada juga class untuk mengubah warna dari setiap kolom dan baris pada tabel. Class ini dapat digunakan sesuai dengan kebutuhan. Untuk dapat lebih memahaminya, anda dapat menerapkan script dibawah ini.
| Class | Deskripsi |
|---|---|
| .active | Memberikan warna pada baris atau sel tertentu pada tabel |
| .success | Menunjukkan tindakan yang berhasil atau bersifat yang positif |
| .info | Menunjukkan perubahan informatif netral atau sebuah tindakan |
| .warning | Menunjukkan peringatan atau yang memerlukan perhatian |
| .danger | Menunjukkan bahaya atau sesuatu yang bersifat negatif |
Nah, dengan menggunakan beberapa class diatas. Maka dapat memberikan sebuah tampilan tabel yang inginkan dengan desain yang elegan.
Dalam pembuatan tabel, file dari bootstrap yang kita butuhkan adalah :
Dalam pembuatan tabel, file dari bootstrap yang kita butuhkan adalah :
<link rel="stylesheet" href="assets/css/bootstrap.min.css">Dasar dari pembuatan tabel responsive ini, ialah menggunakan class yang telah disediakan bootstrap. Berikut struktur dasarnya :
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<div class="table-responsive">Langsung saja, dibawah berikut script untuk semua kumpulan class yang kita bahas sebelumnya. Jadi, hanya memanggil class-classnya saja kita. Oke, buat file table_responsive.html lalu coba terapkan script dibawah ini :
Isi script tabel anda disini
</div>
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<section class="col-lg-6">
<div class="table-responsive">
<div class="page-header">
<h3>Tabel Responsive Basic</h3>
</div>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Krimer</td>
<td>jhon@mail.com</td>
</tr>
<tr>
<td>Budi</td>
<td>Jaya</td>
<td>jaya@gmail.com</td>
</tr>
<tr>
<td>Andi</td>
<td>Saja</td>
<td>andi@gmail.com</td>
</tr>
<tr>
<td>Sinta</td>
<td>Sayang Kamu</td>
<td>sinta@mail.com</td>
</tr>
<tr>
<td>Farih</td>
<td>Jeje</td>
<td>farih@gmail.com</td>
</tr>
<tr>
<td>Cici</td>
<td>Clalu</td>
<td>cici@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-lg-6">
<div class="table-responsive">
<div class="page-header">
<h3>Tabel Responsive Striped</h3>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Krimer</td>
<td>jhon@mail.com</td>
</tr>
<tr>
<td>Budi</td>
<td>Jaya</td>
<td>jaya@gmail.com</td>
</tr>
<tr>
<td>Andi</td>
<td>Saja</td>
<td>andi@gmail.com</td>
</tr>
<tr>
<td>Sinta</td>
<td>Sayang Kamu</td>
<td>sinta@mail.com</td>
</tr>
<tr>
<td>Farih</td>
<td>Jeje</td>
<td>farih@gmail.com</td>
</tr>
<tr>
<td>Cici</td>
<td>Clalu</td>
<td>cici@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-lg-6">
<div class="table-responsive">
<div class="page-header">
<h3>Tabel Responsive Border</h3>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Krimer</td>
<td>jhon@mail.com</td>
</tr>
<tr>
<td>Budi</td>
<td>Jaya</td>
<td>jaya@gmail.com</td>
</tr>
<tr>
<td>Andi</td>
<td>Saja</td>
<td>andi@gmail.com</td>
</tr>
<tr>
<td>Sinta</td>
<td>Sayang Kamu</td>
<td>sinta@mail.com</td>
</tr>
<tr>
<td>Farih</td>
<td>Jeje</td>
<td>farih@gmail.com</td>
</tr>
<tr>
<td>Cici</td>
<td>Clalu</td>
<td>cici@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-lg-6">
<div class="table-responsive">
<div class="page-header">
<h3>Tabel Responsive Hover</h3>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Krimer</td>
<td>jhon@mail.com</td>
</tr>
<tr>
<td>Budi</td>
<td>Jaya</td>
<td>jaya@gmail.com</td>
</tr>
<tr>
<td>Andi</td>
<td>Saja</td>
<td>andi@gmail.com</td>
</tr>
<tr>
<td>Sinta</td>
<td>Sayang Kamu</td>
<td>sinta@mail.com</td>
</tr>
<tr>
<td>Farih</td>
<td>Jeje</td>
<td>farih@gmail.com</td>
</tr>
<tr>
<td>Cici</td>
<td>Clalu</td>
<td>cici@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-lg-6">
<div class="table-responsive">
<div class="page-header">
<h3>Tabel Responsive Condensed</h3>
</div>
<table class="table table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jhon</td>
<td>Krimer</td>
<td>jhon@mail.com</td>
</tr>
<tr>
<td>Budi</td>
<td>Jaya</td>
<td>jaya@gmail.com</td>
</tr>
<tr>
<td>Andi</td>
<td>Saja</td>
<td>andi@gmail.com</td>
</tr>
<tr>
<td>Sinta</td>
<td>Sayang Kamu</td>
<td>sinta@mail.com</td>
</tr>
<tr>
<td>Farih</td>
<td>Jeje</td>
<td>farih@gmail.com</td>
</tr>
<tr>
<td>Cici</td>
<td>Clalu</td>
<td>cici@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="col-lg-6">
<div class="table-responsive">
<div class="page-header">
<h3>Tabel Responsive Basic</h3>
</div>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>Jhon</td>
<td>Krimer</td>
<td>jhon@mail.com</td>
</tr>
<tr class="success">
<td>Budi</td>
<td>Jaya</td>
<td>jaya@gmail.com</td>
</tr>
<tr class="info">
<td>Andi</td>
<td>Saja</td>
<td>andi@gmail.com</td>
</tr>
<tr class="warning">
<td>Sinta</td>
<td>Sayang Kamu</td>
<td>sinta@mail.com</td>
</tr>
<tr class="danger">
<td>Farih</td>
<td>Jeje</td>
<td>farih@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</body>
</html> Gimana gan, cukup mudah bukan.?? Seperti yang saya katakan sebelumnya, kita hanya memanggil classnya saja, jadi tidak ada yang sulit disini. Saya sudahi dulu tutorial Cara Membuat Tabel Responsive Menggunakan Bootstrap semoga dapat bermanfaat bagi teman-teman semua. Dan bagi yang ingin scriptnya, boleh cantumkan email di komentar, nanti saya kirim filenya. Trima kasih
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
