Membuat table pada HTML memerlukan waktu lebih lama ketimbang menggunakan framework Bootstrap, Bootstrap telah menyediakan beberapa class yang dapat digunakan dalam membangun table di web.
Dengan menggunakan bootstrap, kita tidak hanya bisa membuat satu model desain table. tapi kita bisa membuat banyak model desain sesuai keinginan, karena bootstrap sudah menyediakan banyak sekali class-class yang bisa langsung kita gunakan.
Berikut ini class-class yang disediakan Bootstrap untuk membuat table :
1. Basic Table
Untuk membuat table dengan cepat pada Bootstrap hanya memerlukan class table, ini juga sebagai dasar table Bootstrap.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Table Bootstrap</title>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Membuat Table Dengan Bootstrap 4</h3>
<h4><a href="https://www.agussuratna.net">www.agussuratna.net</a></h4>
</center>
<br/><br/>
<table class="table">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad Tayo</td>
<td>Cimahi</td>
</tr>
<tr>
<td>2</td>
<td>Sulaeman Bahri</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Tatang Somantri</td>
<td>Cianjur</td>
</tr>
<tr>
<td>4</td>
<td>Zaenudin Hasan</td>
<td>Bandung</td>
</tr>
<tr>
<td>5</td>
<td>Bambang Susanto</td>
<td>Semarang</td>
</tr>
<tr>
<td>6</td>
<td>Zaenab Mawar</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasilnya akan terlihat seperti ini:
2. Responsive Table
Untuk membuat table responsive Bootstrap, gunakan class table-responsive seperti ini :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Table Responsive Bootstrap</title>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Membuat Table Responsive Dengan Bootstrap 4</h3>
<h4><a href="https://www.agussuratna.net">www.agussuratna.net</a></h4>
</center>
<br/><br/>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad Tayo</td>
<td>Cimahi</td>
</tr>
<tr>
<td>2</td>
<td>Sulaeman Bahri</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Tatang Somantri</td>
<td>Cianjur</td>
</tr>
<tr>
<td>4</td>
<td>Zaenudin Hasan</td>
<td>Bandung</td>
</tr>
<tr>
<td>5</td>
<td>Bambang Susanto</td>
<td>Semarang</td>
</tr>
<tr>
<td>6</td>
<td>Zaenab Mawar</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Pada contoh di atas menggunakan div sebagai induk table, beberapa programmer juga biasanya meletakkan class table-reponsive langsung di dalam tag table bersamaan dengan class table. Hasilnya sama aja akan terlihat seperti ini :
Untuk membuktikan responsive nya, ubahlah ukuran website tersebut ke ukuran lain seperti ukuran HP.
3. Table Berwarna
Pada dasarnya table itu berwarna dasar putih atau polos tanpa garis penuh sisi, kita dapat memberikan warna pada setiap baris bahkan warna yang berbeda-beda dengan menggunakan contextual class.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Table Warna Bootstrap</title>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Membuat Table Berwarna Dengan Bootstrap 4</h3>
<h4><a href="https://www.agussuratna.net">www.agussuratna.net</a></h4>
</center>
<br/><br/>
<table class="table">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad Tayo</td>
<td>Cimahi</td>
</tr>
<tr class="bg-success">
<td>2</td>
<td>Sulaeman Bahri</td>
<td>Jakarta</td>
</tr>
<tr class="bg-danger">
<td>3</td>
<td>Tatang Somantri</td>
<td>Cianjur</td>
</tr>
<tr class="bg-info">
<td>4</td>
<td>Zaenudin Hasan</td>
<td>Bandung</td>
</tr>
<tr class="bg-warning">
<td>5</td>
<td>Bambang Susanto</td>
<td>Semarang</td>
</tr>
<tr class="bg-active">
<td>6</td>
<td>Zaenab Mawar</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Dari kodingan di atas akan terlihat hasilnya terlihat seperti ini :
4. Table Bergaris (Belang)
Untuk membuat table bergaris pada Bootstrap, bisa menggunakan class table-stiped dalam membuat table agar table tidak polos.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Table Responsive Bootstrap</title>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Membuat Table Striped Dengan Bootstrap 4</h3>
<h4><a href="https://www.agussuratna.net">www.agussuratna.net</a></h4>
</center>
<br/><br/>
<div class="table-striped">
<table class="table">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad Tayo</td>
<td>Cimahi</td>
</tr>
<tr>
<td>2</td>
<td>Sulaeman Bahri</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Tatang Somantri</td>
<td>Cianjur</td>
</tr>
<tr>
<td>4</td>
<td>Zaenudin Hasan</td>
<td>Bandung</td>
</tr>
<tr>
<td>5</td>
<td>Bambang Susanto</td>
<td>Semarang</td>
</tr>
<tr>
<td>6</td>
<td>Zaenab Mawar</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Hasil :
5. Table Padat (table-condensed)
table-condensed merupakan table Bootstrap yang dibangun tanpa jarak (padding) ditengah-tengah sehingga table tampak padat berisi.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Table Condensed Bootstrap</title>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Membuat Table Condensed Dengan Bootstrap 4</h3>
<h4><a href="https://www.agussuratna.net">www.agussuratna.net</a></h4>
</center>
<br/><br/>
<table class="table table-condensed">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad Tayo</td>
<td>Cimahi</td>
</tr>
<tr>
<td>2</td>
<td>Sulaeman Bahri</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Tatang Somantri</td>
<td>Cianjur</td>
</tr>
<tr>
<td>4</td>
<td>Zaenudin Hasan</td>
<td>Bandung</td>
</tr>
<tr>
<td>5</td>
<td>Bambang Susanto</td>
<td>Semarang</td>
</tr>
<tr>
<td>6</td>
<td>Zaenab Mawar</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Table tanpa spasi (jarak padding) diantara kotak item ini akan tampak seperti:
gambar 5 – table bootstrap tanpa spasi jarak
6. Table Border
Jika diperhatikan pada contoh-contoh di atas, table tersebut tidak memiliki border atau garis luaran yang menutupi table, untuk membuat garis border pada table Bootstrap bisa menggunakan class table-bordered.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Table Bordered Bootstrap</title>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Membuat Table Bordered Dengan Bootstrap 4</h3>
<h4><a href="https://www.agussuratna.net">www.agussuratna.net</a></h4>
</center>
<br/><br/>
<table class="table table-bordered">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad Tayo</td>
<td>Cimahi</td>
</tr>
<tr>
<td>2</td>
<td>Sulaeman Bahri</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Tatang Somantri</td>
<td>Cianjur</td>
</tr>
<tr>
<td>4</td>
<td>Zaenudin Hasan</td>
<td>Bandung</td>
</tr>
<tr>
<td>5</td>
<td>Bambang Susanto</td>
<td>Semarang</td>
</tr>
<tr>
<td>6</td>
<td>Zaenab Mawar</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasil :
7. Hover Rows Table
class table-hover merupakan class dalam Boostrap yang akan berubah warna ketika disentuh (hover), warna ini sama dengan class active.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<title>Table Hover Bootstrap</title>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Membuat Table Hover Dengan Bootstrap 4</h3>
<h4><a href="https://www.agussuratna.net">www.agussuratna.net</a></h4>
</center>
<br/><br/>
<table class="table table-hover">
<thead>
<tr>
<th>Nomor</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ahmad Tayo</td>
<td>Cimahi</td>
</tr>
<tr>
<td>2</td>
<td>Sulaeman Bahri</td>
<td>Jakarta</td>
</tr>
<tr>
<td>3</td>
<td>Tatang Somantri</td>
<td>Cianjur</td>
</tr>
<tr>
<td>4</td>
<td>Zaenudin Hasan</td>
<td>Bandung</td>
</tr>
<tr>
<td>5</td>
<td>Bambang Susanto</td>
<td>Semarang</td>
</tr>
<tr>
<td>6</td>
<td>Zaenab Mawar</td>
<td>Surabaya</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hasilnya ketika di hover (mengarahkan mouse) ke baris di table, akan berwarna pada rows (baris) yang disentuh. Pastikan untuk tidak menggunakan class active pada table agar terlihat perubahan ketika hover.
Hasilnya :
