WebTech Interaktif

HTML · Bab 4

Tabel

Menyusun tabel data dengan caption, kepala dan badan tabel, sel judul ber-scope, serta sel gabungan colspan dan rowspan, dan memahami bahwa tabel bukan alat tata letak.

Daftar harga dan stok paling mudah dibaca dalam bentuk tabel: baris untuk produk, kolom untuk keterangannya. Bab ini membahas cara menyusun tabel data yang benar dan bisa dibaca pembaca layar.

4.1 Kapan Memakai Tabel

Pakai tabel untuk data yang memang berbentuk baris dan kolom: daftar harga, jadwal, atau rekap stok. Jangan memakai tabel untuk tata letak halaman (misalnya membagi halaman menjadi kolom kiri dan kanan). Pembaca layar akan membacakan halaman sel demi sel seolah-olah data, dan tabel sulit menyesuaikan diri di layar ponsel. Tata letak adalah tugas CSS (flexbox dan grid di topik CSS).

4.2 Struktur Dasar: <table>, <tr>, <th>, <td>

  • <table> membungkus seluruh tabel.
  • <tr> (table row) membuat satu baris.
  • <th> (table header) adalah sel judul, dan <td> (table data) adalah sel isi.

Tabel HTML tidak bergaris secara bawaan. Contoh di bab ini memakai sedikit CSS agar garis sel terlihat; CSS dibahas di topik berikutnya. Jangan memakai atribut border lama pada <table>; garis tabel diatur dengan CSS.

HTML + JavaScript

🧪 Coba ubah: tambahkan baris untuk Cokelat Batang (SN-002, Rp12.000, stok 10).

4.3 <caption>, <thead>, <tbody>, dan <tfoot>

  • <caption> adalah judul tabel dan ditulis tepat setelah <table>. Pembaca layar mengumumkannya sebelum isi tabel.
  • <thead> mengelompokkan baris judul, <tbody> baris data, dan <tfoot> baris ringkasan (misalnya total).
  • Bila <tbody> tidak ditulis, browser menambahkannya sendiri. Kamu bisa melihatnya di panel Elements DevTools.

4.4 Sel Judul dan scope

Atribut scope menyatakan arah sel judul: scope="col" untuk judul kolom dan scope="row" untuk judul baris. Dengan scope, pembaca layar bisa menyebut judul yang sesuai saat membacakan sebuah sel, misalnya “Teh Kotak, Stok, 30”.

HTML + JavaScript

4.5 Menggabungkan Sel: colspan dan rowspan

  • colspan="2" membuat satu sel melebar ke dua kolom.
  • rowspan="2" membuat satu sel memanjang ke dua baris. Baris di bawahnya ditulis dengan satu sel lebih sedikit, karena tempatnya sudah terisi.
HTML + JavaScript

🧪 Coba ubah: tambahkan kategori Snacks & Confectionery dengan rowspan="2" untuk Keripik Singkong dan Cokelat Batang, di atas baris “Kategori lain menyusul.”.

4.6 Ringkasan

  • Tabel untuk data berbentuk baris dan kolom, bukan untuk tata letak.
  • <table> berisi <caption>, <thead>, <tbody>, dan bila perlu <tfoot>. Baris ditulis dengan <tr>, sel dengan <th> dan <td>.
  • scope="col" dan scope="row" membantu pembaca layar mengaitkan sel dengan judulnya.
  • colspan dan rowspan menggabungkan sel. Jumlah sel per baris harus tetap konsisten.