Membuat Tabel HTML Lebih Menarik Dengan Bootstrap 5
Saat membuat website, sering kali kita perlu menampilkan data dalam bentuk tabel. Tapi membuat tabel yang terlihat rapi dan menarik bisa jadi cukup merepotkan kalau harus menulis semua gaya CSS sendiri. Di sinilah Bootstrap 5 hadir sebagai solusi. Dengan hanya beberapa baris HTML dan class bawaan Bootstrap, kamu sudah bisa membuat tabel yang tampil profesional dan responsif dengan bootstrap 5 . Pada artikel ini, kita akan belajar cara menggunakan tabel di Bootstrap 5 secara sederhana, lengkap dengan contoh kode yang bisa langsung kamu praktikkan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Tabel Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4">Daftar Investasi</h2>
<table class="table table-bordered table-striped table-hover">
<thead class="table-dark">
<tr>
<th>No</th>
<th>Jenis Investasi</th>
<th>Keuntungan (%)</th>
<th>Risiko</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Emas</td>
<td>6</td>
<td>Rendah</td>
</tr>
<tr>
<td>2</td>
<td>Saham</td>
<td>12</td>
<td>Tinggi</td>
</tr>
<tr>
<td>3</td>
<td>Reksa Dana</td>
<td>8</td>
<td>Sedang</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Fitur Bootstrap 5 Yang Digunakan :
- `table` : gaya dasar tabel
- `table-bordered` : menambahkan garis batas
- `table-striped` : memberi warna baris selang-seling
- `table-hover` : efek hover saat kursor diarahkan ke baris
- `table-dark` : latar belakang gelap untuk header
Tags :