Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Membuat tabel dasar dengan tag
<table>,<tr>,<th>, dan<td> - Menambahkan heading tabel yang jelas
- Membuat tabel dengan header, body, dan footer menggunakan
<thead>,<tbody>,<tfoot>
Materi Singkat
Tabel digunakan untuk menampilkan data yang terstruktur — data yang punya baris dan kolom, seperti:
- Jadwal pelajaran
- Daftar harga produk
- Data nilai ujian
- Tabel perbandingan fitur
Tabel bukan untuk mengatur tata letak halaman (itu tugas CSS). Tabel hanya untuk data tabular.
Struktur Dasar Tabel
Tabel dibangun dari dalam ke luar:
table → keseluruhan tabel
tr → table row (satu baris)
th → table header (sel header, tebal dan tengah)
td → table data (sel data biasa)
Tag-tag Tabel
<table>— pembungkus utama tabel<tr>(table row) — satu baris tabel<th>(table header) — sel header (secara default: tebal, rata tengah)<td>(table data) — sel data biasa
Memisahkan Kepala, Badan, dan Kaki Tabel
Untuk tabel yang lebih rapi dan semantik:
<thead>— bagian kepala tabel (baris header)<tbody>— bagian isi/badan tabel<tfoot>— bagian kaki tabel (total, ringkasan)
Ini tidak wajib tapi sangat disarankan karena membuat kode lebih mudah dibaca dan dikelola.
Atribut border
Secara default tabel HTML tidak punya garis. Kamu bisa menambahkan border="1" sementara untuk melihat strukturnya — tapi idealnya ini diatur dengan CSS.
Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jadwal Belajar</title>
</head>
<body>
<h1>Jadwal Belajar Minggu Ini</h1>
<table border="1">
<thead>
<tr>
<th>Hari</th>
<th>Topik</th>
<th>Durasi</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Senin</td>
<td>HTML: Pengenalan</td>
<td>1 jam</td>
<td>Selesai</td>
</tr>
<tr>
<td>Selasa</td>
<td>HTML: Struktur & Heading</td>
<td>1 jam</td>
<td>Selesai</td>
</tr>
<tr>
<td>Rabu</td>
<td>HTML: List & Link</td>
<td>1 jam</td>
<td>Sedang berjalan</td>
</tr>
<tr>
<td>Kamis</td>
<td>HTML: Gambar & Tabel</td>
<td>1 jam</td>
<td>Belum</td>
</tr>
<tr>
<td>Jumat</td>
<td>HTML: Form</td>
<td>1 jam</td>
<td>Belum</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>5 jam</td>
<td>2 selesai</td>
</tr>
</tfoot>
</table>
</body>
</html>Penjelasan colspan="2": Atribut ini membuat sel tersebut "menyatu" dengan sel di sebelah kanannya — seperti merge cell di Excel. Angka 2 berarti sel ini mencakup 2 kolom.
Tugas Kecil
- Buat file
tabel.html - Buat tabel yang menampilkan daftar 5 mata pelajaran favoritmu dengan kolom:
- Nama Mata Pelajaran
- Tingkat Kesulitan (Mudah / Sedang / Sulit)
- Nilaimu (angka 0-100)
- Komentar singkat
- Gunakan
<thead>untuk header dan<tbody>untuk data - Tambahkan
<tfoot>dengan baris yang berisi "Total" di kolom pertama dan rata-rata nilaimu di kolom nilai