Lebak Cyber Tips dan Trik Komputer
Membuat Tabel Dengan Bootstrap
lebakcyber.net – Membuat tabel dengan bootstrap. Pada beberapa kesempatan sebelumnya mengenai tutorial belajar bootstrap, kita sudah sempat membahas mengenai beberapa tutorial, yaitu :
Dan pada kesempatan kali ini kita akan belajar mengenai bagaimana cara membuat tabel dengan menggunakan bootstrap. Bootstrap menyediakan fasilitas untuk membuat tampilan tabel yang kita buat menjadi lebih bagus. Cara menggunakannya juga cukup mudahm kita hanya perlu memanggil komponen tabel yang ada pada library bootstrap dengan menggunakan atribut class. Selain itu tabel pada bootstrap juga sudah mendukung responsive desain agar tampilan tabel dapat lebih baik saat diakses diberbagai jenis perangkat.
Kenapa sih kita harus menggunakan bootstrap pada saat membuat tabel? berikut ini penjelasannya :
- Mudah digunakan
- Banyak fasilitas dan fitur yang diberikan
- Dokumentasi yang jelas
- Tampilan tabel dapat responsive
- Dapat disinkronkan dengan plugin pihak ketiga lainnya seperti DataTable
Jenis-jenis Tabel Pada Bootstrap
Banyak jenis tabel yang dapat dibuat dengan menggunakan bootstrap, dan cara menggunakannya juga cukup mudah, kita hanya perlu memanggil library yang dibutuhkan dengan atribut class. Dan bagi kalian yang belum mengerti bagaimana cara menggunakan bootstrap pada halaman web yang sedang dibuat silahkan baca dulu tutorial ini : Cara Menggunakan Bootstrap Pada Website
1. Basic Table
Basic table merupakan tabel sederhana yang ada di bootstrap. Agar dapat menggunakan jenis tabel ini kita dapat menggunakan class table pada bootstrap. Berikut ini contoh perintah dari pembuatan basic table pada bootstrap. Oh ya pada contoh ini saya menggunakan bootstrap yang sudah didownload dan bukan menggunakan cara memanggil bootstrap dari MaxCDN.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="text-center">
<h1>Tabel di Bootstrap</h1>
<p>Lebakcyber.net</p>
</div>
<div class="container">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Beras</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Minyak</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>Gas</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Nanti hasilanya seperti pada gambar dibawah ini :
2. Bordered Table
Bordered table merupakan tabel yang memiliki garis pada kerangka tabelnya. Untuk menggunakan tabel bordered ini cukup mengganti perintah table class menjadi <table class=’table table-bordered’>. Perintah lengkapnya seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="text-center">
<h1>Tabel di Bootstrap</h1>
<p>Lebakcyber.net</p>
</div>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Beras</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Minyak</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>Gas</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td>Garam</td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Nanti hasilnya seperti gambar dibawah ini :
3. Striped Table
Selanjutnya ada table Striped yang artinya sebuah tabel yang memiliki warna baris yang berbeda beda dan berselang seling. Cara membuat table Striped ini juga sangat mudah, kita tinggal mengganti tabel class menjadi table table-striped. Perintah lengkapnya seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="text-center">
<h1>Tabel di Bootstrap</h1>
<p>Lebakcyber.net</p>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Beras</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Minyak</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>Gas</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td>Garam</td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Nanti outputnya seperti pada gambar dibawah ini :
4. Menggabungkan Bordered dan Striped Table
Sekarang kita coba menggabungkan jenis tabel bordered dengan striped table, cara menggunakannya juga sangat mudah, tinggal ganti table class menjadi seperti ini : <table class=”table table-bordered table-striped”>. Perintah lengkapnya seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="text-center">
<h1>Tabel di Bootstrap</h1>
<p>Lebakcyber.net</p>
</div>
<div class="container">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Jumlah</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Beras</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Minyak</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>Gas</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td>Garam</td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Nanti outputnya akan tampak seperti pada gambar dibawah ini :
Oke jadi itulah bagaimana cara membuat tabel dengan menggunakan bootstrap, sangat mudah bukan caranya. Jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial mengenai bootstrap lainnya ya. Sampai jumpa pada tutorial belajar bootstrap selanjutnya.
