Bootstrap - Tables: Panduan Untuk Pemula

Hai teman-teman, calon pengembang web! Hari ini, kita akan masuk ke dunia yang menarik dari tabel Bootstrap. Jangan khawatir jika Anda belum pernah mengkode sebelumnya - saya akan menjadi panduan ramah Anda dalam perjalanan ini, dan kita akan berjalan langkah demi langkah. Pada akhir tutorial ini, Anda akan dapat membuat tabel yang indah dan responsif seperti seorang ahli!

Apa Itu Tabel Bootstrap?

Sebelum kita masuk ke detil, mari bicarakan tentang apa itu tabel Bootstrap. Bayangkan Anda mengatur buku kesukaan Anda di rak buku. Tabel Bootstrap seperti rak buku itu, tapi untuk situs web Anda! Mereka membantu Anda menyajikan informasi dalam cara yang rapi dan terorganisir, sehingga mudah bagi pengunjung Anda untuk membaca dan memahami.

Tabel Sederhana

Mari mulai dari dasar. Berikut adalah cara membuat tabel Bootstrap sederhana:

<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>

Kode ini membuat tabel dengan tiga kolom: Nama, Usia, dan Kota. Bagian <thead> menentukan header tabel, dan <tbody> mengandung data aktual. class="table" adalah yang memberikan keajaiban Bootstrap!

Varian Tabel

Bootstrap menawarkan gaya yang berbeda untuk tabel Anda. Itu seperti memilih gaya berbeda untuk data Anda! Berikut adalah beberapa varian:

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Hanya tambahkan kelas ini ke tag <table> Anda untuk mengubah penampilan keseluruhan tabel. Itu mudah!

Tabel Berwarna Khusus

Ingin membuat baris atau sel tertentu menonjol? Bootstrap sudah siap membantu:

<table class="table">
<thead>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Baris aktif</td>
<td>Berbeda</td>
</tr>
<tr>
<td>Baris biasa</td>
<td class="table-primary">Sel berwarna khusus</td>
</tr>
</tbody>
</table>

Kelas table-active menyorot seluruh baris, sedangkan kelas seperti table-primary dapat digunakan pada sel individual.

Baris dan Kolom Bergaris

Ingat buku catatan bergaris zebra Anda saat sekolah? Anda bisa melakukan hal yang sama dengan tabel Anda!

Untuk baris bergaris:

<table class="table table-striped">
...
</table>

Dan untuk kolom bergaris:

<table class="table table-striped-columns">
...
</table>

Baris yang Bisa Diarahkan

Ingin membuat tabel Anda interaktif? Buat baris bercahaya saat Anda mengarahkan cursor ke atasnya:

<table class="table table-hover">
...
</table>

Itu seperti magis - cobalah!

Tabel Bergaris dan Tabel Tanpa Garis

Anda dapat menambahkan garis ke tabel Anda:

<table class="table table-bordered">
...
</table>

Atau menghapusnya sepenuhnya:

<table class="table table-borderless">
...
</table>

Tabel Kecil

Untuk penampilan yang lebih kompak, gunakan kelas table-sm:

<table class="table table-sm">
...
</table>

Itu sempurna untuk saat Anda perlu memasukkan banyak data di ruang kecil!

Pemisah Grup Tabel

Ingin mengelompokkan data Anda? Gunakan kelas table-group-divider:

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>

Ini menambah pemisah yang terlihat antara kelompok body tabel.

Penyusunan Vertikal

Anda dapat mengontrol bagaimana konten Anda beralign vertikal di dalam sel:

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>Cell ini dan tetangganya diberikan align bawah</td>
<td>Bawah</td>
<td class="align-top">Cell ini diberikan align atas</td>
</tr>
</tbody>
</table>

Gunakan align-middle untuk align tengah dan align-top untuk align atas.

Tabel Responsif

Buat tabel Anda terlihat bagus di semua perangkat dengan kelas table-responsive:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Ini memungkinkan tabel Anda untuk menggulir secara horizontal di layar kecil. Itu seperti memberikan tabel Anda kekuatan super untuk menyesuaikan dengan ukuran layar apa pun!

Penempatan

Anda bahkan dapat memasukkan tabel di dalam tabel! Berikut adalah cara:

<table class="table table-striped">
<thead>
<tr>
<th>Nama</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baris induk</td>
<td>
<table class="table table-sm">
<tr>
<td>Baris nested 1</td>
</tr>
<tr>
<td>Baris nested 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Itu seperti boneka Rusia, tapi dengan tabel!

Anatomi Tabel

mari merinci bagian-bagian tabel:

Kepala Tabel

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
...
</table>

<thead> mengandung header kolom Anda.

Kaki Tabel

<table class="table">
...
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>

Gunakan <tfoot> untuk footer tabel, yang bagus untuk ringkasan atau total.

Judul

Tambahkan judul ke tabel dengan <caption>:

<table class="table">
<caption>Daftar pengguna</caption>
...
</table>

Itu seperti memberikan tabel Anda tag nama!

Kesimpulan

Dan begitu, teman-teman! Anda telah belajar membuat dan menggaya tabel menggunakan Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba kombinasi kelas yang berbeda. Sebelum Anda tahu, Anda akan membuat tabel yang tidak hanya mengatur data secara efektif tetapi juga terlihat bagus!

Selamat mengkode, dan semoga tabel Anda selalu indah dan terbootstrap!

Fitur	Kelas	Deskripsi
Tabel Sederhana	table	Tabel Bootstrap dasar
Varian	table-primary, table-secondary, dll.	Gaya berbeda
Tabel Berwarna Khusus	table-active, table-primary, dll.	Menyorot baris atau sel tertentu
Baris Bergaris	table-striped	Warna baris bergantian
Kolom Bergaris	table-striped-columns	Warna kolom bergantian
Baris yang Bisa Diarahkan	table-hover	Menyorot baris saat diarahkan
Tabel Bergaris	table-bordered	Menambahkan garis ke semua sisi tabel dan sel
Tabel Tanpa Garis	table-borderless	Menghapus semua garis
Tabel Kecil	table-sm	Membuat tabel lebih kompak
Pemisah Grup Tabel	table-group-divider	Menambah pemisah antara kelompok body tabel
Penyusunan Vertikal	align-top, align-middle, align-bottom	Mengontrol align vertikal konten sel
Tabel Responsif	table-responsive	Membuat tabel gulir secara horizontal di layar kecil
Penempatan	N/A	Tabel dapat ditempatkan di dalam sel tabel
Kepala Tabel	<thead>	Menentukan header tabel
Kaki Tabel	<tfoot>	Menentukan footer tabel
Judul	<caption>	Menambahkan judul ke tabel

Credits: Image by storyset