Dalam pembuatan sebuah web dinamis seringkali kita berhubungan dengan tabular data. Dan sudah barang tentu untuk penyajiannya, dibutuhkan tabel. Dalam tutorial kali ini, kita akan membahas tentang cara membuat tabel dengan Bootstrap.
Seperti biasa, dalam tutorial ini anda dapat mendownload semua source code tentang pembuatan tabel dengan bootstrap jika memang pembahasan dalam tutorial ini adalah topik yang sedang anda cari. Bahkan anda bisa mencoba live preview terlebih dahulu untuk memastikan program yang kami sertakan sesuai dengan keinginan anda. Link download dan live preview dari contoh tabel dengan bootstrap terdapat pada link paling bawah.
Tabel Sederhana
Tabel sederhana pada bootstrap memiliki ukuran cell padding 8px secara dan hanya memiliki horizontal divider. Maksud dari horizontal divider adalah tabel tersebut dapat dipecah menjadi beberapa cell secara horizontal.
Berikut ini adalah contoh pembuatan tabel sederhana dengan Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Tabel Sederhana</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>Nama Pertama</th>
<th>Terakhir</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fauzi</td>
<td>Hanafiz</td>
<td>fauzi@yahoo.com</td>
</tr>
<tr>
<td>Mirza</td>
<td>Ismail</td>
<td>miil@yahoo.com</td>
</tr>
<tr>
<td>Desi</td>
<td>Rukina</td>
<td>desi@yahoo.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Tabel Border
Sesuai dengan namanya, maka tabel ini akan membuat pembatas pada tiap baris dan kolum. Untuk menerapkan border pada tabel, kita menggunkan <table class="table table-bordered">. Berikut ini adalah contoh dari tabel border dengan menggunakan bootstrap :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tabel Bordered</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Nama Pertama</th>
<th>Terakhir</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fauzi</td>
<td>Hanafiz</td>
<td>fauzi@yahoo.com</td>
</tr>
<tr>
<td>Mirza</td>
<td>Ismail</td>
<td>miil@yahoo.com</td>
</tr>
<tr>
<td>Desi</td>
<td>Rukina</td>
<td>desi@yahoo.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Tabel Contextual Class
Tabel yang menggunakan warna-warni pada baris dari masing-masing data. Pada tabel contextual class terdapat beberapa class untuk warna yang berbeda :active, success, info, warning dan danger. Berikut ini contoh pembuatan tabel bootstrap dengan model contextual class :
<html>
<head>
<title>Tabel Contextual Class pada Bootstrap</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Tabel Contextual Classes</h2>
<p>Kelas kontekstual dapat digunakan untuk warna baris tabel atau sel tabel. Kelas-kelas yang dapat digunakan adalah: .active, .success, .info, .warning, dan .danger.</p>
<table class="table">
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Status Kelas</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Martunis junior</td>
<td>Success</td>
<td>Martunisjr@gmail.com</td>
</tr>
<tr class="active">
<td>Julaiha adam</td>
<td>Active</td>
<td>adamjul23@yahoo.com</td>
</tr>
<tr class="info">
<td>Dinda Carin</td>
<td>Info</td>
<td>infodinda@yahoo.com</td>
</tr>
<tr class="warning">
<td>Sarimin</td>
<td>Warning</td>
<td>Sarimin123@yahoo.com</td>
</tr>
<tr class="danger">
<td>Philips edward</td>
<td>Danger</td>
<td>philipsed@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
