Seluruh komponen sudah ada di tangan: table, caption, thead, tbody, tfoot, th, td, dan scope. Chapter ini merakit semuanya menjadi satu tabel data yang utuh dan siap pakai — pola yang bisa diulang untuk daftar harga, jadwal, maupun rekap apa pun pada proyek kita.

Studi kasusnya: tabel harga lengkap lima menu Kedai Kopi Siti.

Tabel Harga Lengkap #

Berikut markup lengkapnya — seluruhnya adalah pola yang sudah kita pelajari satu per satu:

html 
<table>
  <caption>Menu dan harga Kedai Kopi Siti, per Juni 2026</caption>
  <thead>
    <tr>
      <th scope="col">Menu</th>
      <th scope="col">Porsi</th>
      <th scope="col">Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kopi susu</td>
      <td>Reguler</td>
      <td>Rp18.000</td>
    </tr>
    <tr>
      <td>Kopi tubruk</td>
      <td>Reguler</td>
      <td>Rp12.000</td>
    </tr>
    <tr>
      <td>Teh tarik</td>
      <td>Besar</td>
      <td>Rp15.000</td>
    </tr>
    <tr>
      <td>Roti bakar cokelat</td>
      <td>2 potong</td>
      <td>Rp20.000</td>
    </tr>
    <tr>
      <td>Air mineral</td>
      <td>600 ml</td>
      <td>Rp8.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total lima menu</th>
      <td>5 pilihan</td>
      <td>Rp73.000</td>
    </tr>
  </tfoot>
</table>

Hasil Render:

Mari kita telaah kode per blok:

  1. <caption>: judul deskriptif — apa isinya (menu dan harga), di mana berlakunya (Kedai Kopi Siti), sejak kapan (per Juni 2026).
  2. <thead> dengan tiga th scope="col": tiga kolom diberi nama dan arah relasinya sejak awal.
  3. <tbody> lima baris: tiap baris satu menu — sel pertama nama, kedua porsi, ketiga harga; kolom sejajar karena jumlah sel konsisten.
  4. <tfoot> ringkasan: total harga ditulis manual — HTML tidak menghitung apa pun; th scope="row" menandai judul baris ringkasan.

Perhatikan urutan keputusan kita: konteks lebih dulu (caption), nama kolom (thead), data (tbody), lalu ringkasan (tfoot). Urutan itu kebetulan sama dengan urutan pengumuman pembaca layar — konteks, nama kolom, lalu isi — sehingga struktur yang rapi untuk mata otomatis ramah untuk telinga. Pola lima langkah ini dapat kita pakai ulang apa pun datanya: ganti isi caption, jumlah kolom, dan barisnya; kerangkanya tetap.

Detail yang Menyempurnakan #

Tiga kebiasaan kecil membuat tabel data lebih matang. Pertama, format angka Indonesia: tulis harga dengan pemisah ribuan berupa titik — Rp18.000 — konsisten pada semua baris; HTML tidak memformat angka, yang tampil di halaman persis apa yang kita tulis. Kedua, jaga satu jenis isi per kolom — kolom harga berisi harga saja, kolom porsi berisi porsi saja — jangan mencampur satuan yang tidak sejenis pada kolom yang sama. Ketiga, kolom angka lazim ditata rata kanan agar digitnya sejajar — itu urusan CSS text-align; kita cukup tahu ke mana arahnya, pembahasannya menyusul di course CSS.

Ringkasan #

  • Tabel data utuh = caption deskriptif + thead ber-scope="col" + tbody yang konsisten + tfoot ringkasan — kerangka yang dapat dipakai ulang untuk data apa pun.
  • Format angka Indonesia ditulis manual dan konsisten; satu kolom satu jenis isi.
  • Penataan visual — angka rata kanan, baris zebra — diserahkan ke CSS tanpa mengubah struktur tabel.

Pola ini belum lengkap tanpa tinjauan aksesibilitas — chapter berikutnya merangkum praktik accessible tables.