Tujuan Pembelajaran
Setelah mempelajari materi ini, peserta diharapkan mampu:
- Memahami cara membuat tabel menggunakan Bootstrap.
- Menggunakan berbagai kelas (class) Bootstrap pada tabel.
- Membuat tabel yang responsif.
- Mengkombinasikan berbagai fitur tabel Bootstrap.
1. Apa itu Tabel Bootstrap?
Bootstrap menyediakan berbagai class CSS yang membuat tampilan tabel menjadi lebih menarik tanpa harus menulis CSS sendiri.
Cukup menambahkan class tertentu pada tag <table>.
2. Menambahkan Bootstrap
Gunakan CDN Bootstrap pada bagian <head>.
<!DOCTYPE html>
<html>
<head>
<title>Tabel Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>3. Tabel Standar
Class yang digunakan:
tableContoh:
<div class="container mt-4">
<h2>Data Mahasiswa</h2>
<table class="table">
<tr>
<th>NIM</th>
<th>Nama</th>
<th>Jurusan</th>
</tr>
<tr>
<td>22001</td>
<td>Budi</td>
<td>Informatika</td>
</tr>
<tr>
<td>22002</td>
<td>Siti</td>
<td>Sistem Informasi</td>
</tr>
</table>
</div>Hasil:
- Tabel memiliki garis dan padding yang rapi.
4. Tabel Bergaris (Striped)
Gunakan class:
table table-stripedContoh
<table class="table table-striped">Hasil:
Baris ganjil dan genap memiliki warna berbeda.
5. Tabel Berwarna Gelap
<table class="table table-dark">Hasil:
- Background hitam
- Tulisan putih
6. Tabel dengan Hover
<table class="table table-hover">Saat mouse diarahkan ke baris tabel, warnanya berubah.
7. Tabel dengan Border
<table class="table table-bordered">Semua sel memiliki garis.
8. Tabel Tanpa Border
<table class="table table-borderless">Tidak memiliki garis pembatas.
9. Tabel Kecil
<table class="table table-sm">Ukuran tinggi baris menjadi lebih kecil.
10. Menggabungkan Class
Bootstrap mengizinkan beberapa class sekaligus.
Contoh:
<table class="table table-striped table-hover table-bordered">Hasil:
- Bergaris
- Hover
- Border
11. Memberi Warna Header
Gunakan
<thead class="table-dark">atau
<thead class="table-primary">Contoh
<table class="table">
<thead class="table-primary">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andi</td>
<td>TI-1A</td>
</tr>
</tbody>
</table>12. Warna Baris
Bootstrap menyediakan warna bawaan.
Misalnya
<tr class="table-success">atau
<tr class="table-warning">Contoh
<tr class="table-success">Baris menjadi hijau.
Pilihan warna:
- table-primary
- table-secondary
- table-success
- table-danger
- table-warning
- table-info
- table-light
- table-dark
13. Tabel Responsif
Jika tabel memiliki banyak kolom.
Gunakan
<div class="table-responsive">
<table class="table">
...
</table>
</div>Pada layar HP akan muncul scroll horizontal.
14. Contoh Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Tabel Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2>Data Mahasiswa</h2>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<thead class="table-dark">
<tr>
<th>No</th>
<th>NIM</th>
<th>Nama</th>
<th>Jurusan</th>
<th>Kelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22001</td>
<td>Budi</td>
<td>Informatika</td>
<td>TI-A</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>22002</td>
<td>Siti</td>
<td>Sistem Informasi</td>
<td>SI-B</td>
</tr>
<tr class="table-warning">
<td>3</td>
<td>22003</td>
<td>Andi</td>
<td>Teknik Komputer</td>
<td>TK-C</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Ringkasan Class Tabel Bootstrap
| Class | Fungsi |
|---|---|
table | Tabel standar Bootstrap |
table-striped | Baris bergaris |
table-hover | Efek hover |
table-bordered | Garis di semua sel |
table-borderless | Tanpa garis |
table-sm | Ukuran tabel lebih kecil |
table-dark | Tema gelap |
table-primary | Warna biru |
table-success | Warna hijau |
table-danger | Warna merah |
table-warning | Warna kuning |
table-info | Warna biru muda |
table-responsive | Tabel responsif pada layar kecil |
Latihan
Latihan 1
Buat tabel berisi data 5 mahasiswa dengan ketentuan:
- Menggunakan
table - Menggunakan
table-bordered
Latihan 2
Buat tabel daftar produk dengan:
table-stripedtable-hover
Kolom:
- Kode
- Nama Produk
- Harga
- Stok
Latihan 3
Buat tabel nilai siswa dengan:
- Header
table-dark - Salah satu siswa dengan nilai tertinggi diberi warna
table-success - Salah satu siswa yang belum lulus diberi warna
table-danger
Latihan 4
Buat tabel data pegawai dengan minimal 8 kolom menggunakan:
table-responsivetable-stripedtable-hovertable-bordered
Latihan 5 (Studi Kasus)
Buat halaman Data Penjualan Toko menggunakan Bootstrap dengan spesifikasi:
- Menggunakan
container. - Judul halaman “Laporan Penjualan”.
- Tabel responsif.
- Header berwarna gelap.
- Menampilkan minimal 10 data penjualan.
- Kolom: No, Tanggal, Nama Barang, Harga, Jumlah, Total.
- Baris dengan total penjualan terbesar diberi warna
table-success. - Baris dengan stok habis atau penjualan bermasalah diberi warna
table-danger.
