Tabel Bootstrap – Hai teman – teman bertemu lagi di tutorial bootstrap #3 yang kali ini akan membahas mengenai tabel pada bootstrap. Sebelumnya jika teman – teman ketinggalan materi sebelumnya silahkan dibaca terlebih dahulu yaitu Pengenalan Bootstrap dan Form Bootstrap yang dapat mememberikan sedikit informasi mengenai Apa itu Bootstrap serta Form input.
Sebelum membahas lebih lanjut mengenai Tabel Bootstrap, teman-teman perlu lebih dahulu mengerti apakah itu tabel serta dasar penggunaan nya dalam pemrograman web.
Dasar Tabel HTML
Tabel adaalah salah satu penyajian data dalam bentuk baris dan kolom dalam pemrograman web. Tabel dalam pemrograman website khusunya HTML dimunculkan dengan memakai tag <tabel> yang tentunya bertempat didalam tag <body> dalam struktur pemrograman HTML. Untuk lebih jelasnya silahkan lihat pada contoh dibawah :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- tabel mulai dibuat -->
<table style="width:100%">
<tr>
<th>Nama</th>
<th>Nomor</th>
</tr>
<tr>
<td>Paijo</td>
<td>50</td>
</tr>
</table>
<!-- akhir dari pembuatan tabel -->
</body>
</html>Dari script html diatas dapat dilihat terdapat beberapa tag dalam <tabel> yang umum digunakan untuk menyajikan data dengan lebih baik yaitu
- <tr> – untuk mendefinisikan tabel row /baris
- <td> – untuk mendefinisikan tabel data / tempat dimana data diletakkan
- <th> – untuk mendefinisikan header dari tabel
- <caption> – untuk meletakkan judul dari tabel yang nentinya akan muncul diatas dari tabel yang dibuat
Tabel Bootstrap
Setelah mengetahui dasar pembuatan tabel dari pemrograman web, selanjutnya adalah Tabel dengan bootstrap. Dalam bootstrap terdapat beberapa tampilan yang akan dapat dipilih dengan memasukkan class kedelam tag HTML dan tentunya memasukkan atau meload bootstrap di dalam tag headnya.
- Tabel umum (basic tabel)
Dalam tabel basic kita hanya perlu menambah kan class=”tabel” dalam tag tabel dan memiliki ciri yaitu hanya ada pemisah garis horizontal, contoh:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap tabel Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- script berfungsi untuk menyesuaikan tampilan dengan layar user --> <!--- mulai input bootstrap 3 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!--biasanya class container menandakan tempat penyajian data --> <h2>Basic Table</h2> <table class="table"> <!-- letak tag --> <thead> <tr> <th>Nama</th> <th>No</th> <th>Kelas</th> </tr> </thead> <tbody> <tr> <td>Bayu</td> <td>12</td> <td>kelas</td> </tr> </tbody> </table> </div> </body> </html>
- Tabel bordered
Tabel bordered adalah jenis tabel bootstrap yang menambahkan border disekeliling tabel. Untuk membuat tabel dengan tipe/style bordered pada class tag tabel ditambahkan “tabel tabel-bordered”, contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap tabel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table dengan border</h2>
<table class="table table-bordered"> <!-- tag tabel bordered -->
<thead>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>TKK 6c</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>- Tabel Hover
Selanjutnya adalah tabel hover yaitu tabel dengan menambahkan efek hover atau efek latarbelakang abu-abu (umumnya) jika pointer mouse mengarah pada baris tabel. contoh nya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap tabel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table hover</h2>
<table class="table table-hover"> <!-- tag tabel hover -->
<thead>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>TKK 6c</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>- Contextual tabel
Contextual tabel atau biasa saya menyebutnya tabel info yaitu tabel dengan warna baris yang dapat dipilih sesuai konteks atau keadaan (info), pada contextual tabel class yang dipakai sama dengan basic tabel yaitu “tabel” tatapi tag <tr> ditambahkan class. contoh leih jelasnyanya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap tabel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Tabel</h2>
<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yoga</td>
<td>TKK6C</td>
</tr>
<tr class="success">
<td>Bayu</td>
<td>TKK6C</td>
</tr>
<tr class="danger">
<td>Angga</td>
<td>TKK6C</td>
</tr>
<tr class="info">
<td>Tama</td>
<td>TKK6C</td>
</tr>
<tr class="warning">
<td>Joni</td>
<td>TKK^A</td>
</tr>
<tr class="active">
<td>Joki</td>
<td>TKK6B</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>| Class | Penjelasan |
| Active | = sama seperti tabel hover yaitu menambahkan efek warna hover pada cell yang diberi atribut |
| Success | = menandakan aksi yang positif biasanya ditandai dengan warna tabel cell hijau |
| Danger | = biasanya menandakan sesuatu yang bahaya pada cell tabel dan berwarna kemerahan |
| Info | = biasanya mengakibatkan tabel cell berwarna biru dan mengindikasikan sesuai yang bersifat informatif |
| Warning | = mengakibatkan tabel cell berwarna kuning dan menandakan bahwa cell tabel ini perlu perhatian khusus |
Beberapa tabel bootstrap diatas adalah jenis tabel yang paling banyak digunakan dalam mendesain sebuah tampilan website, selain itu teman -teman juga dapat memodifikasi tabel sesuai yang diinginkan yaitu dengan menambahkan css yang menurut teman lebih baik serta menambahkan atribut seperti “colspan” untuk menggabungkan kolom tabel jadi satu atau “rowspan” untuk menggabungkan baris tabel .
sekian dari saya ada kurang lebihnya mohon maaf dan terima kasih.
