Tabel HTML: Cara Membuat dan Mengatur Data dalam Tabel
Tabel HTML digunakan untuk menampilkan data dalam format baris dan kolom yang terstruktur. Ini sangat berguna untuk menyajikan informasi seperti jadwal, daftar harga, ringkasan data, atau data tabular lainnya.
Struktur Dasar Tabel HTML
Untuk membuat tabel di HTML, Anda akan menggunakan beberapa tag utama:
- <table>: Elemen wadah utama untuk seluruh tabel.
- <thead>: Mengelompokkan konten bagian kepala (header) tabel. Ini biasanya berisi judul-judul kolom.
- <tbody>: Mengelompokkan konten bagian tubuh (body) utama tabel. Ini berisi baris-baris data aktual.
- <tfoot>: Mengelompokkan konten bagian kaki (footer) tabel. Ini bisa digunakan untuk ringkasan atau total.
- <tr>: Mendefinisikan satu baris (table row) dalam tabel.
- <th>: Mendefinisikan sel header tabel (table header). Teks di dalamnya biasanya dicetak tebal dan rata tengah secara default. Digunakan di dalam <thead> atau terkadang di <tbody> untuk header baris.
- <td>: Mendefinisikan sel data tabel (table data). Ini adalah sel-sel yang berisi data aktual.
Berikut adalah contoh struktur dasarnya:
<table>
<thead>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Baris 1, Kolom 1</td>
<td>Data Baris 1, Kolom 2</td>
<td>Data Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Data Baris 2, Kolom 1</td>
<td>Data Baris 2, Kolom 2</td>
<td>Data Baris 2, Kolom 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>-</td>
<td>Jumlah Akhir</td>
</tr>
</tfoot>
</table>Contoh Penerapan: Tabel Daftar Keluhan Mahasiswa
Mari kita buat tabel sederhana untuk menampilkan daftar keluhan mahasiswa.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Keluhan Mahasiswa</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
table {
width: 100%;
border-collapse: collapse; /* Menggabungkan border sel */
margin-top: 20px;
}
th, td {
border: 1px solid #ddd; /* Border untuk sel */
padding: 8px;
text-align: left; /* Rata kiri untuk teks */
}
th {
background-color: #f2f2f2; /* Warna latar belakang untuk header */
color: #333;
}
tr:nth-child(even) { /* Memberi warna latar belakang berbeda pada baris genap */
background-color: #f9f9f9;
}
tr:hover { /* Efek hover pada baris */
background-color: #f1f1f1;
}
caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<h1>Daftar Keluhan Terbaru</h1>
<table>
<caption>Status Keluhan Mahasiswa Semester Genap 2025</caption>
<thead>
<tr>
<th>No.</th>
<th>Subjek Keluhan</th>
<th>Kategori</th>
<th>Pelapor (NIM)</th>
<th>Tanggal</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Proyektor Ruang A201 Rusak</td>
<td>Fasilitas</td>
<td>Mahasiswa X (2023001)</td>
<td>25/07/2025</td>
<td><span style="color: orange;">Pending</span></td>
</tr>
<tr>
<td>2</td>
<td>Jadwal Kuliah Bentrok</td>
<td>Akademik</td>
<td>Mahasiswa Y (2023005)</td>
<td>24/07/2025</td>
<td><span style="color: green;">Selesai</span></td>
</tr>
<tr>
<td>3</td>
<td>Koneksi Wi-Fi Lemah di Perpustakaan</td>
<td>Fasilitas</td>
<td>Mahasiswa Z (2023010)</td>
<td>23/07/2025</td>
<td><span style="color: red;">Dalam Proses</span></td>
</tr>
<tr>
<td>4</td>
<td>Kesulitan Akses Sistem SIAKAD</td>
<td>Layanan Kemahasiswaan</td>
<td>Mahasiswa A (2023015)</td>
<td>22/07/2025</td>
<td><span style="color: green;">Selesai</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" style="text-align: center;">Data diperbarui terakhir pada 27 Juli 2025</td>
</tr>
</tfoot>
</table>
</body>
</html>Atribut Penting untuk Sel Tabel
Ada dua atribut yang sangat berguna untuk menggabungkan sel dalam tabel:
- colspan:
- Fungsi: Menggabungkan dua atau lebih sel secara horizontal (melintasi kolom).
- Nilai: Angka yang menunjukkan berapa banyak kolom yang harus digabungkan.
- Contoh: <td> yang mencakup 3 kolom:
<tr> <td colspan="3">Data ini mencakup tiga kolom</td> </tr>- Pada contoh "Daftar Keluhan Mahasiswa" di atas, <tfoot> menggunakan colspan="6" untuk membuat satu sel yang membentang di seluruh lebar tabel.
- rowspan:
- Fungsi: Menggabungkan dua atau lebih sel secara vertikal (melintasi baris).
- Nilai: Angka yang menunjukkan berapa banyak baris yang harus digabungkan.
- Contoh: <td> yang mencakup 2 baris:
<tr> <td rowspan="2">Data ini mencakup dua baris</td> <td>Data lain di baris 1</td> </tr> <tr> <td>Data lain di baris 2</td> </tr>
Catatan Penting: Styling Tabel
Secara default, tabel HTML akan terlihat sangat dasar (tanpa border, dll.). Untuk membuat tabel terlihat rapi dan menarik, Anda harus menggunakan CSS. Pada contoh di atas, saya sudah menyertakan sedikit CSS dasar di bagian <style> untuk memberikan border, padding, warna latar belakang, dan efek hover.
