Mengenal Tabel
Tabel HTML digunakan untuk menyajikan data dengan cara grid seperti baris dan kolom. Menggunakan Bootstrap kalian dapat meningkatkan tampilan tabel dengan cara yang cepat dan mudah.
Membuat Tabel Sederhana dengan Bootstrap
Kalian dapat membuat tabel dengan basic styling yang memiliki pembagi horizontal dan padding cell kecil (8px secara default), dengan hanya menambahkan kelas Bootstrap .table ke elemen <table>.
<table class="table">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Kalian juga dapat membuat versi terbalik dari tabel ini, yaitu tabel dengan teks terang pada latar belakang gelap, dengan menambahkan kelas tambahan .table-dark ke kelas dasar .table, seperti ini:
<table class="table table-dark">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Tips: Kalian bisa menambahkan kelas tambahan .table-dark ke elemen .table untuk membuat dark version dari tabel apa saja seperti stripped, hoverable, bordered, tabel kompak, dan sebagainya.
Membuat Tabel dengan Striped Rows
Kalian dapat membuat tabel dengan latar belakang alternatif seperti zebra-stripes dengan hanya menambahkan kelas Bootstrap .table-striped ke kelas dasar .table.
Ini dicapai dengan menambahkan warna latar belakang ke baris tabel dalam elemen <tbody> melalui CSS selector nth-child. Berikut contohnya:
<table class="table table-striped">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Demikian pula, kalian juga dapat membuat versi inverted atau dark version dari strip table dengan menambahkan kelas tambahan .table-dark ke tabel, seperti yang ditunjukkan dalam contoh berikut:
<table class="table table-striped table-dark">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Tabel dengan Border di Setiap Sisinya
Kalian juga bisa menambahkan border pada semua sel tabel dengan menambahkan kelas Bootstrap tambahan .table-bordered ke kelas dasar .table, seperti yang ditunjukkan dalam contoh berikut:
<table class="table table-bordered">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Tabel Borderless
Kalian juga bisa membuat tabel tanpa batas (borderless) menggunakan kelas .table-borderless pada elemen .table.
<table class="table table-borderless">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Mengaktifkan Hover State pada Baris Tabel
<table class="table table-hover">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Tabel Kecil atau Compact
Kalian juga dapat membuat tabel Kalian lebih compact dan menghemat ruang dengan menambahkan kelas tambahan .tabel-sm ke kelas dasar .tabel. Kelas .table-sm membuat tabel menjadi ringkas (compact) dengan memotong sel menjadi dua. Berikut ini contoh sebuah tabel kecil:
<table class="table table-sm">
<thead>
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Mengatur Warna Tabel Head
Kalian juga dapat menentukan warna latar belakang yang berbeda untuk tabel head menggunakan kelas modifier .thead-light atau .thead-dark pada elemen <thead>.
Contoh berikut menggunakan class .thead-light untuk membuat tabel dengan light head.
<table class="table">
<thead class="thead-light">
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Demikian juga, kalian bisa menggunakan kelas .thead-dark untuk membuat tabel dengan dark head.
<table class="table">
<thead class="thead-dark">
<tr>
<th>Row</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>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Kelas Opsional Emphasis untuk Baris Tabel
Ada beberapa kelas kontekstual untuk menekankan baris (emphasize row) atau data sel individual seperti success, warning, danger,dll. Dengan mewarnai latar belakangnya.
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>Bill</th>
<th>Payment Date</th>
<th>Payment Status</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>Credit Card</td>
<td>04/07/2019</td>
<td>Waiting for statement</td>
</tr>
<tr class="table-secondary">
<td>2</td>
<td>Insurance</td>
<td>02/07/2019</td>
<td>Cancelled</td>
</tr>
<tr class="table-success">
<td>3</td>
<td>Water</td>
<td>01/07/2019</td>
<td>Paid</td>
</tr>
<tr class="table-info">
<td>4</td>
<td>Internet</td>
<td>05/07/2019</td>
<td>Change plan</td>
</tr>
<tr class="table-warning">
<td>5</td>
<td>Electricity</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>Deactivated</td>
</tr>
<tr class="table-light">
<td>8</td>
<td>Car Service</td>
<td>08/07/2019</td>
<td>Call in to confirm</td>
</tr>
<tr class="table-dark">
<td>9</td>
<td>Gas</td>
<td>06/07/2019</td>
<td>Payment failed</td>
</tr>
</tbody>
</table>
Output dari contoh di atas akan terlihat seperti ini:
Membuat Tabel Responsive dengan Bootstrap
Kalian juga dapat membuat tabel responsif untuk mengaktifkan horizontal scrolling pada perangkat kecil.
Untuk membuat tabel apa pun responsif, cukup tempatkan tabel di dalam elemen <div> dan terapkan kelas .tabel-responsif di atasnya. Kalian juga dapat menentukan kapan tabel harus memiliki scrollbar, berdasarkan lebar layar, menggunakan kelas .tabel-responsif {-sm | -md | -lg | -xl}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
<td>Vestibulum consectetur scelerisque...</td>
</tr>
<tr>
<td>3</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
<td>Integer pulvinar leo id risus...</td>
</tr>
</tbody>
</table>
</div>
