Apa Itu Tabel?
Tabel biasanya digunakan untuk menyajikan data secara grid seperti kolom dan baris. Bootstrap merupakan sebuah framework HTML, CSS dan Javascript. Dengan menggunakan Bootstrap kita dapat dengan mudah dan cepat mendesain sebuah website reponsive. Untuk studi kasus kali ini yaitu membuat tabel responsive dengan bantuan Bootstrap.
Untuk menggunakan tabel bootstrap, kita perlu untuk memperhatikan beberapa aspek penting, yaitu dengan menambahkan css dan js.
CSS
Copy dan paste css link ke dalam tag <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">JS
Copy dan paste js link sebelum tag </body>.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>Membuat Table Sederhana dengan Bootstrap
Contoh kali ini kita akan membuat tabel sederhana dengan gaya dasar.
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
</tbody>
</table> |
| Gambar 1. Output dari contoh diatas. |
Membuat Dark Table dengan Bootstrap
Pada contoh ini kita akan membuat tabel dengan dengan tampilan dark atau gelap.
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table> |
| Gambar 2. Output Dark Table |
Membuat Striped Rows Table dengan Bootstrap
Pada contoh ini kita akan membuat table dengan gaya striped
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table> |
| Gambar 3. Output Striped Table |
Masih ada beberapa contoh untuk membuat table dengan bootstrap. Anda bisa langsung kunjungi website Bootstrap untuk mempelajarinya. Disini saya hanya memberikan contoh kecil untuk Anda. Semoga artikel ini bermanfaat untuk Anda, terimakasih.
Sumber: Bootstrap
Hello