Kapan Menggunakan Tabel

Elemen tabel begitu mirip kisi tata letak sampai satu era panjang web dipakai untuk memposisikan seluruh halaman. Warisan itu masih muncul sampai sekarang: tabel dipakai untuk daftar belanja, susunan kartu, sampai kolom-kolom formulir. Chapter penutup section ini memberi kita alat keputusan yang tegas: kapan tabel tepat, dan kapan sebaiknya kita memilih struktur lain.

Tabel = Data Dua Dimensi #

Aturannya satu kalimat: tabel untuk data dua dimensi — data yang tiap nilainya bermakna dari relasi baris dan kolom sekaligus. Ujian keputusannya: tanyakan pada tiap sel, “apakah nilai ini bermakna karena judul barisnya sekaligus judul kolomnya?”

Contohnya, sel “Rp18.000” pada tabel menu bermakna karena menunya (baris) dan ukuran porsinya (kolom). Bila salah satu sumbu dihapus dan nilai itu masih bermakna utuh, datanya satu dimensi — bukan materi tabel, melainkan materi list.

Pemakaian yang tepat: jadwal (hari × jam), daftar harga (menu × porsi), perbandingan spesifikasi (produk × fitur), dan rekap penjualan (periode × item).

Bukan Tabel: Tata Letak Halaman #

Kesalahan paling terkenal dari era sebelum CSS matang — seluruh halaman disusun sebagai tabel:

<table>
  <tr>
    <td width="200">Menu navigasi di sini</td>
    <td>Artikel utama di sini</td>
    <td width="160">Kolom promosi di sini</td>
  </tr>
</table>

Markup ini lolos parsing — browser menampilkannya — tetapi salah secara semantik: pembaca layar mengumumkan “tabel satu baris tiga sel” untuk sebuah halaman, dan mesin pencari membaca susunan sel, bukan tata letak. Alat yang tepat: CSS grid untuk kolom-kolom dan flex untuk baris-baris elemen. HTML cukup memakai header, nav, main, aside — struktur semantik yang dibahas pada Section Semantic HTML.

Bukan Tabel: Daftar Satu Dimensi #

Data yang hanya punya satu sumbu adalah ranah list. Tabel satu kolom seperti ini memboroskan seluruh mesin tabel — kolom, judul, relasi — demi tampilan yang bisa dicapai ul:

<table>
  <tr><td>Kopi bubuk 250 g</td></tr>
  <tr><td>Susu UHT 1 liter</td></tr>
  <tr><td>Gula pasir 500 g</td></tr>
</table>

Perbaikannya lebih ringkas sekaligus lebih bermakna — daftar tanpa urutan:

<ul>
  <li>Kopi bubuk 250 g</li>
  <li>Susu UHT 1 liter</li>
  <li>Gula pasir 500 g</li>
</ul>

ul dikenali semua alat bantu sebagai daftar. Bila urutan langkahnya bermakna, pilihan jatuh ke ol — keduanya sudah kita bedah tuntas pada Section Lists.

Dua blok berdampingan berikut memperlihatkan ujian itu sekaligus. Tabel kiri memuat data dua dimensi yang sah — setiap selnya bermakna karena menunya sekaligus ukurannya; daftar kanan memuat data satu dimensi yang sama sekali tidak membutuhkan mesin tabel:

Ujilah dengan aturan satu kalimat dari awal chapter: setiap sel tabel kiri bermakna karena judul barisnya sekaligus judul kolomnya — hapus salah satu sumbu, dan “Rp12.000” kehilangan maknanya. Butir daftar kanan berdiri sendiri; membalik urutannya pun tidak mengubah makna.

Bukan Tabel: Kartu dan Formulir #

Dua kasus sisanya sering menyamar sebagai tabel. Susunan kartu produk atau artikel adalah kisi tata letak — wilayah CSS grid dengan elemen artikel atau produk biasa. Formulir dengan pasangan label dan input adalah ranah form yang ditata CSS; tidak ada relasi baris-kolom pada datanya, yang ada hanya posisi presentasi.

Tabel Keputusan #

Rangkuman keputusan untuk kebutuhan yang paling sering dijumpai:

Ringkasan #

• Tabel khusus data dua dimensi: tiap sel bermakna dari judul baris dan judul kolomnya sekaligus.
• Tata letak → CSS grid/flex; daftar satu dimensi → ul/ol; kartu → CSS grid; formulir → form + CSS.
• Tabel data tidak perlu dihindari — justru itu alat terbaiknya.

Section berikutnya berpindah ke elemen yang mengumpulkan masukan dari pengunjung: form beserta seluruh komponennya.