Coba bayangin nampilin daftar harga 50 produk: nama, harga, stok, kategori. Kamu bisa pake list bullet, paragraf, atau div berderet — tapi mata user bakal pusing. Tabel adalah cara paling efisien manusia ngebandingin data multi-kolom — udah dipake ribuan tahun (ya, tabel udah ada sejak era Mesir kuno). HTML <table> ngasih struktur ini di web, plus accessibility bonus: screen reader bisa baca silang ("hari Selasa, jam berapa Matematika?") berkat atribut scope di <th>.

⚠️ Plot twist. Dulu (era 1995-2010), developer pake <table> buat layout HALAMAN — bukan buat data. Itu praktek SUPER salah yang bikin web jaman itu jelek di mobile + buruk untuk a11y. Modern: <table> HANYA untuk data tabular. Layout halaman? Pake CSS Grid/Flexbox.

Sintaks Tabel Sederhana

Struktur dasar: <table> bungkus, <tr> per baris, <th> header kolom, <td> data sel:

<table>
  <caption>Daftar Musim</caption>
  <tr>
    <th>Nama Musim</th>
    <th>Berlangsung Selama</th>
  </tr>
  <tr>
    <td>Kemarau</td>
    <td>1 November - 30 April</td>
  </tr>
  <tr>
    <td>Hujan</td>
    <td>1 Mei - 31 Oktober</td>
  </tr>
</table>

<tr> pertama isinya nama kolom (header), <tr> berikutnya isinya data baris demi baris.

Struktur Tabel yang Aksesibel

Untuk a11y dan SEO, butuh <thead>, <tbody>, dan atribut scope di <th>:

<table>
  <caption>Daftar Musim</caption>
  <thead>
    <tr>
      <th scope="col">Nama Musim</th>
      <th scope="col">Berlangsung Selama</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kemarau</td>
      <td>1 November - 30 April</td>
    </tr>
  </tbody>
</table>

• <caption> — judul tabel, dibaca screen reader
• <thead> / <tbody> — pisahkan header dan body
• scope="col" — <th> ini header kolom (gunakan row kalau header baris)

🎭 Analogi sehari-hari

<table> = jadwal pelajaran yang ditempel di mading sekolah atau daftar harga di warung makan. Tiap baris satu entry (Senin / Soto Ayam), tiap kolom satu info (jam pelajaran / harga). <thead> = baris judul kolom yang biasanya di-highlight kuning biar gampang dikenali. <tbody> = isi data utama. <th scope> itu kayak kasih tau yang baca: "ini judul KOLOM" atau "ini judul BARIS" — krusial buat orang yang nyari info silang ("hari Selasa, jam berapa Matematika?").

⚠️ Jebakan yang sering ditemui

• Tabel untuk layout — jangan pakai <table> untuk menyusun layout halaman. Itu praktik 1990-an. Pakai CSS Grid/Flexbox.
• Tanpa scope di <th> — tabel kompleks dengan header baris dan kolom membingungkan screen reader. Selalu pakai scope="col" atau scope="row".
• Cell kosong — <td></td> di tabel data sering bikin screen reader skip baris. Isi dengan — atau "Tidak tersedia".
• Responsif dengan display: block — di mobile sering pakai td { display: block }. Tapi ini hilangkan struktur tabel di accessibility tree. Pakai pattern "stack" dengan <dl> atau role="table" eksplisit.
• Header tanpa <thead> — visual mungkin OK, tapi ekspor / a11y tools tidak tahu mana header. Selalu bungkus header row dalam <thead>.

TL;DR: <table> = data tabular (jadwal, harga, comparison). Struktur: <table> > <thead>/<tbody> > <tr> > <th>/<td>. Wajib scope="col"/scope="row" di <th> biar screen reader bisa baca silang. <caption> = judul tabel buat a11y. JANGAN pakai <table> buat layout halaman (praktik 1990-an, pakai Grid/Flexbox). Mobile responsive susah — pertahanin struktur a11y, jangan asal display: block.