Daftar Isi
Tabel merupakan salah satu elemen yang penting dalam desain web untuk menampilkan data secara terstruktur dan mudah dibaca. Bootstrap 5 menyediakan komponen tabel yang powerful dan responsif, memudahkan pengembang web untuk membuat tampilan yang menarik dan fungsional. Artikel ini akan memberikan panduan langkah demi langkah tentang cara menggunakan tabel dalam Bootstrap 5 untuk pemula, beserta contoh skrip yang jelas dan detail.
Mengenal Bootstrap 5 Tables
Sebelum kita masuk ke contoh penggunaan tabel dalam Bootstrap 5, mari kita kenali dulu beberapa konsep dasar tentang tabel dalam Bootstrap 5:
- Struktur Dasar: Setiap tabel dalam Bootstrap 5 biasanya terdiri dari beberapa elemen dasar seperti
<table>
,<thead>
,<tbody>
, dan<tr>
. Ini membantu dalam mengatur data ke dalam baris dan kolom yang terorganisir. - Kelas CSS: Bootstrap 5 menyediakan berbagai kelas CSS yang dapat diterapkan pada elemen-elemen tabel untuk mengatur tampilan dan perilaku, seperti
table
,table-striped
,table-bordered
, dan lainnya. - Responsif: Tabel dalam Bootstrap 5 secara default responsif, artinya akan menyesuaikan ukuran layar perangkat pengguna dan menampilkan scroll horizontal jika diperlukan.
Contoh Penggunaan Tabel dalam Bootstrap 5
Sekarang, mari kita lihat contoh sederhana penggunaan tabel dalam Bootstrap 5.
1. Tabel Dasar
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Usia</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jane Smith</td>
<td>25</td>
</tr>
</tbody>
</table>
2. Tabel Striped dan Bordered
<table class="table table-striped table-bordered">
<!-- Isi Tabel -->
</table>
3. Tabel Responsif
<div class="table-responsive">
<table class="table">
<!-- Isi Tabel -->
</table>
</div>
Kesimpulan
Dengan menggunakan tabel dalam Bootstrap 5, pengembang web dapat dengan mudah membuat tampilan yang terstruktur dan responsif untuk menampilkan data.
Originally posted 2024-02-05 20:52:24.