Tabel: Menampilkan Data Baris dan Kolom

Struktur Dasar Tabel

Tabel dibangun dari tiga tag: <table> (pembungkus), <tr> (baris, table row), dan di dalamnya <td> (sel data) atau <th> (sel judul kolom):

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>17</td>
    <td>Bandung</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>16</td>
    <td>Jakarta</td>
  </tr>
</table>

<th> otomatis tampil tebal dan rata tengah, karena perannya sebagai judul. Pakai <th> untuk header, <td> untuk isi.

Caption: Judul Tabel

Tag <caption> memberi judul pada tabel. Taruh tepat setelah <table> dibuka:

<table>
  <caption>Daftar Siswa Kelas XII</caption>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
</table>

thead, tbody, tfoot

Untuk tabel yang lebih besar, kelompokkan barisnya:

<table>
  <caption>Laporan Penjualan</caption>
  <thead>
    <tr><th>Bulan</th><th>Omzet</th></tr>
  </thead>
  <tbody>
    <tr><td>Januari</td><td>5jt</td></tr>
    <tr><td>Februari</td><td>7jt</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>12jt</td></tr>
  </tfoot>
</table>

Selain bikin kode rapi, ini membantu screen reader memahami mana header, mana isi, mana ringkasan.

Menggabungkan Sel

• colspan: menggabungkan beberapa kolom menjadi satu sel.
• rowspan: menggabungkan beberapa baris menjadi satu sel.

<table>
  <tr>
    <th colspan="2">Jadwal Piket</th>
  </tr>
  <tr>
    <td>Senin</td>
    <td>Andi</td>
  </tr>
</table>

colspan="2" artinya sel judul membentang selebar dua kolom.

Kapan Tabel Boleh Dipakai

Aturan penting: tabel hanya untuk data tabular (data yang memang berbentuk baris dan kolom). Jangan pakai tabel untuk mengatur layout halaman. Zaman dulu orang pakai tabel untuk layout, dan itu mimpi buruk untuk dirawat.

Catatan teknis: Screen reader punya mode navigasi khusus tabel (lompat antar sel, baca header kolom). Kalau kamu pakai tabel untuk layout, pengguna screen reader akan kebingungan karena dibacakan seolah-olah itu data. Untuk layout, pakai <div> dan CSS (dibahas di modul layouting).

Contoh Lengkap

<table>
  <caption>Jadwal Pelajaran Senin</caption>
  <thead>
    <tr>
      <th>Jam</th>
      <th>Mata Pelajaran</th>
      <th>Guru</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>07.00</td>
      <td>Matematika</td>
      <td>Bu Rina</td>
    </tr>
    <tr>
      <td>08.30</td>
      <td>Bahasa Inggris</td>
      <td>Pak Budi</td>
    </tr>
  </tbody>
</table>

Itu saja fondasinya. Tabel yang kompleks pun cuma pengulangan pola ini.