Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 6 : Cara Membuat Typhography di Bootstrap, selanjutnya kita akan belajar cara membuat tabel di Bootstrap.
Apa itu Tabel
Tabel HTML digunakan untuk menyajikan data dengan cara grid seperti baris dan kolom. Menggunakan Bootstrap Anda dapat meningkatkan tampilan tabel dengan cepat dan mudah.
Lihat tutorial di Tabel HTML untuk mempelajari lebih lanjut tentang tabel Tutorial Belajar HTML5 Bagian 11 : Fungsi & Atribut Tag Table di HTML.
Membuat Tabel Sederhana dengan Bootstrap
Anda dapat membuat tabel dengan style dasar yang memiliki pembagi horizontal dan padding sel kecil (8px secara default), hanya dengan menambahkan class .table Bootstrap ke elemen <table>.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Sederhana</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Anda juga dapat membuat versi terbalik dari tabel ini, yaitu tabel dengan teks terang pada latar belakang gelap, dengan menambahkan class ekstra .table-dark ke class dasar .table, seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Gelap </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-dark">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Tips: Anda bisa menambahkan class ekstra .table-dark ke elemen .table untuk membuat versi gelap tabel apa pun seperti stripped, hoverable, border, compact table, dan sebagainya.
Membuat Tabel dengan Baris Bergaris
Anda dapat membuat tabel dengan latar belakang alternatif seperti zebra-stripes hanya dengan menambahkan class Bootstrap .table-striped ke class dasar .table.
Ini dibuat dengan menambahkan warna latar belakang ke baris tabel di dalam elemen <tbody> melalui pemilih CSS : nth-child. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Bergaris </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-striped">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Demikian pula, Anda juga dapat membuat versi terbalik atau gelap dari tabel bergaris dengan menambahkan class ekstra .table-dark ke tabel, seperti yang ditunjukkan pada contoh berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Tabel Bergaris Gelap </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-striped table-dark">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Membuat Tabel dengan Border di Semua Sisi
Anda juga dapat menambahkan border ke semua sel tabel dengan menambahkan class Bootstrap ekstra .table-bordering ke class dasar .table, seperti yang ditunjukkan pada contoh berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Berbingkai</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-bordered">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Membuat Tabel Tanpa Bingkai
Anda juga dapat membuat tabel tanpa bingkai menggunakan class .table-borderless pada elemen .table.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Tanpa Bingkai</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-borderless">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Mengaktifkan Status Hover pada Baris Tabel
Anda juga dapat mengaktifkan status hover pada baris tabel dalam elemen <tbody> dengan menambahkan class Bootstrap .table-hover ke class dasar .table. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel dengan Hover</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-hover">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Membuat Tabel Kecil atau Ringkas
Anda juga dapat membuat tabel Anda lebih ringkas dan menghemat ruang dengan menambahkan class ekstra .table-sm ke class dasar .table. Class .table-sm membuat tabel menjadi padat dengan memotong padding sel menjadi dua. Berikut contoh tabel kecil:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Ringkas</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table table-sm">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Mengatur Warna Header Tabel
Anda juga dapat menentukan warna latar belakang yang berbeda untuk kepala tabel menggunakan class pengubah .thead-light atau .thead-dark pada elemen <thead>.
Contoh berikut menggunakan class .thead-light untuk membuat tabel dengan light head.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Judul tabel dengan Latar Terang</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table">
<thead class="thead-light">
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Demikian juga, Anda dapat menggunakan class .thead-dark untuk membuat tabel dengan dark head.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Judul Tabel Dengan Latar Gelap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table">
<thead class="thead-dark">
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Class Penekanan Opsional untuk Baris Tabel
Ada beberapa class kontekstual untuk menekankan baris atau data sel individu seperti keberhasilan, peringatan, bahaya, dll.
Dengan mewarnai latar belakangnya.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Tabel Dengan Penekanan</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<table class="table">
<thead>
<tr>
<th>Baris</th>
<th>Tagihan</th>
<th>Tanggal Pembayaran</th>
<th>Status Pembayaran </th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>Credit Card</td>
<td>04/07/2019</td>
<td>Menunggu persetujuan </td>
</tr>
<tr class="table-secondary">
<td>2</td>
<td>Asuransi</td>
<td>02/07/2019</td>
<td>Dibatalkan</td>
</tr>
<tr class="table-success">
<td>3</td>
<td>Air</td>
<td>01/07/2019</td>
<td>Dibayar</td>
</tr>
<tr class="table-info">
<td>4</td>
<td>Internet</td>
<td>05/07/2019</td>
<td>Ubah paket </td>
</tr>
<tr class="table-warning">
<td>5</td>
<td>Listrik</td>
<td>03/07/2019</td>
<td>Pending</td>
</tr>
<tr class="table-danger">
<td>6</td>
<td>Telephone</td>
<td>06/07/2019</td>
<td>Due</td>
</tr>
<tr class="table-active">
<td>7</td>
<td>DTH</td>
<td>04/07/2019</td>
<td>Non-aktif</td>
</tr>
<tr class="table-light">
<td>8</td>
<td>Car Service</td>
<td>08/07/2019</td>
<td>Telepon untuk konfirmasi </td>
</tr>
<tr class="table-dark">
<td>9</td>
<td>Gas</td>
<td>06/07/2019</td>
<td>Pembayaran gagal </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Membuat Tabel Responsif dengan Bootstrap
Anda juga dapat membuat tabel responsif untuk mengaktifkan pengguliran horizontal pada perangkat kecil.
Untuk membuat tabel menjadi responsif, cukup letakkan tabel di dalam elemen <div> dan terapkan class .table-responsive di dalamnya. Anda juga dapat menentukan kapan tabel harus memiliki scrollbar, berdasarkan lebar layar, menggunakan class .table-responsive {-sm | -md | -lg | -xl}
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Responsif Tabel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Baris</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Budi</td>
<td>Santoso</td>
<td>bdsantoso@mail.com</td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
<tr>
<td>2</td>
<td>Johan</td>
<td>Sirup</td>
<td>sirupenak@mail.com</td>
<td>Vestibulum consectetur scelerisque...</td>
</tr>
<tr>
<td>3</td>
<td>Dudi</td>
<td>Jago</td>
<td>jgdudi@mail.com</td>
<td>Integer pulvinar leo id risus...</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Semoga tutorial ini bisa membantu Anda belajar cara membuat tabel di Bootstrap.
