HTML 05B: Membuat Tabel Data yang Mudah Dipahami

Tabel digunakan untuk data yang mempunyai hubungan baris dan kolom. Tabel bukan alat untuk menyusun layout halaman.

1. Struktur Dasar

• caption menjelaskan tujuan tabel.
• thead membungkus kelompok kepala tabel.
• tbody membungkus data utama.
• tr adalah satu baris.
• th adalah sel judul dan td adalah sel data.
• scope="col" menjelaskan bahwa header berlaku untuk kolom.

2. Header Baris

scope membantu pembaca layar menghubungkan nilai dengan header yang tepat.

3. Menggabungkan Sel

colspan menggabungkan kolom dan rowspan menggabungkan baris. Gunakan seperlunya karena tabel yang terlalu kompleks sulit dibaca di layar kecil.

Kesalahan Umum

• Menggunakan tabel untuk layout dua kolom.
• Mengosongkan caption pada tabel yang kompleks.
• Menggunakan td untuk semua sel termasuk header.
• Membuat tabel sangat lebar tanpa memikirkan layar ponsel.

Latihan

Buat tabel daftar produk dengan kolom Nama, Harga, dan Stok. Tambahkan caption, thead, dua baris data, serta scope pada setiap header.

Rangkuman

Tabel cocok untuk data tabular. Struktur semantik dan atribut scope membuat hubungan data lebih jelas untuk semua pengguna.