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">
Isi script tabel anda disini
</div>
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 :
<!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
Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.
Related Post
Cara Mengirim Email menggunakan Library PHPMailer
Cara Mengirim Email menggunakan Library PHPMailer - Pada postingan kali ini, kita akan belajar bag
Cara Membuat CRUD menggunakan Codeigniter 3 dan Bootstrap
Cara Membuat CRUD menggunakan Codeigniter 3 dan Bootstrap - Hai teman-teman, pada kesempatan kali 
Pengertian Web Server
Apa itu web server.? Web Server adalah sebuah program aplikasi yang digunakan untuk menyimpan 
Cara Membuat Form Responsive menggunakan Bootstrap
Cara Membuat Form Responsive Menggunakan Bootstrap – Salam sejahtera, pada postingan kali ini s
ConversionConversion EmoticonEmoticon