Setelah mempelajari teks, list, link, dan media, sekarang kita masuk ke elemen yang sering digunakan untuk menyajikan data, yaitu tabel HTML.
Tabel biasanya dipakai untuk:
-
Data laporan
-
Jadwal
-
Daftar peserta
-
Rekap nilai
-
Data administrasi
📌 Tabel HTML fokus pada struktur data, bukan desain.
Apa Itu Tabel HTML?
Tabel HTML adalah elemen yang digunakan untuk menampilkan data dalam bentuk baris dan kolom.
Tabel dibangun dari beberapa tag utama:
-
<table>→ pembungkus tabel -
<tr>→ baris (table row) -
<td>→ sel data -
<th>→ sel judul
Struktur Dasar Tabel HTML
Struktur paling sederhana:
<table> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
Elemen Utama Tabel HTML
1️⃣ <table>
Tag utama pembungkus tabel.
<table> ... </table>
📌 Semua elemen tabel harus berada di dalam <table>.
2️⃣ <tr> (Table Row)
Mewakili satu baris dalam tabel.
<tr> ... </tr>
3️⃣ <td> (Table Data)
Mewakili sel data biasa.
<td>Isi data</td>
4️⃣ <th> (Table Header)
Mewakili judul kolom atau baris.
<th>Nama</th>
📌 Secara default:
-
Teks
<th>→ tebal -
Teks
<th>→ tengah
Contoh Tabel Sederhana (Kode)
<table border="1">
<tr>
<th>Nama</th>
<th>Unit</th>
<th>Status</th>
</tr>
<tr>
<td>Andi</td>
<td>Keperawatan</td>
<td>Aktif</td>
</tr>
<tr>
<td>Siti</td>
<td>Farmasi</td>
<td>Aktif</td>
</tr>
</table>
🔍 Hasil Tampilan di Browser (Ilustrasi)
+-------+-------------+--------+ | Nama | Unit | Status |
+-------+-------------+--------+ | Andi | Keperawatan | Aktif |
+-------+-------------+--------+ | Siti | Farmasi | Aktif |
Menggabungkan Baris (rowspan)
Digunakan untuk menggabungkan sel ke bawah.
<table border="1">
<tr>
<th>Nama</th>
<th>Unit</th>
</tr>
<tr>
<td rowspan="2">Andi</td>
<td>ICU</td>
</tr>
<tr>
<td>IGD</td>
</tr>
</table>
Menggabungkan Kolom (colspan)
Digunakan untuk menggabungkan sel ke samping.
<table border="1">
<tr>
<th colspan="3">Data Pegawai</th>
</tr>
<tr>
<th>Nama</th>
<th>Unit</th>
<th>Status</th>
</tr>
</table>
Elemen Tambahan Tabel (Struktur Lebih Rapi)
<thead>, <tbody>, <tfoot>
Digunakan untuk struktur tabel yang lebih jelas.
<table border="1">
<thead>
<tr>
<th>Nama</th>
<th>Nilai</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andi</td>
<td>85</td>
</tr>
<tr>
<td>Siti</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Rata-rata</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
📌 Sangat dianjurkan untuk:
-
Data besar
-
Aksesibilitas
-
Pengolahan CSS & JavaScript
Contoh Lengkap Tabel HTML (Siap Copy–Paste)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Tabel HTML</title>
</head>
<body>
<h1>Data Peserta Pelatihan</h1>
<table border="1" cellpadding="8">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Unit</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andi</td>
<td>Keperawatan</td>
<td>Aktif</td>
</tr>
<tr>
<td>2</td>
<td>Siti</td>
<td>Farmasi</td>
<td>Aktif</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Peserta</td>
<td>2</td>
</tr>
</tfoot>
</table>
</body>
</html>
Kesalahan Umum Pemula
❌ <td> di luar <tr>
❌ Lupa <tr>
❌ Salah penggunaan rowspan / colspan
❌ Menggunakan tabel untuk layout website
📌 Tabel hanya untuk data, bukan layout halaman.
Ringkasan
✔ <table> pembungkus tabel
✔ <tr> untuk baris
✔ <td> untuk data
✔ <th> untuk judul
✔ rowspan & colspan untuk penggabungan
✔ <thead>, <tbody>, <tfoot> untuk struktur rapi
Penutup
Di Bagian 8 ini, kamu sudah menguasai:
-
Struktur tabel HTML
-
Kode lengkap tabel
-
Contoh hasil tampilannya
-
Best practice tabel HTML
