Tabel HTML: Menata Data dalam Baris dan Kolom

Ada jenis informasi yang memang sudah berbentuk kisi dari sananya: daftar harga, jadwal kelas, perbandingan paket, atau statistik di halaman olahraga. Begitu datamu punya baris dan kolom yang saling sejajar, tabel HTML-lah alat yang pas untuk menampilkannya. Strukturnya memang agak lebih ribet dibanding elemen lain, tapi sekali kamu paham bagaimana tiap bagiannya saling mengisi, semuanya langsung terasa logis.

Di artikel ini kamu akan belajar cara menyusun tabel yang benar, apa fungsi tiap elemen, dan — ini yang paling penting — satu kesalahan besar yang wajib kamu hindari: memakai tabel untuk pekerjaan yang bukan tugasnya.

Bagian-bagian sebuah tabel

Tabel tersusun dari beberapa elemen yang saling bersarang. Ini yang paling pokok:

<table> — membungkus seluruh tabel.
<tr> — singkatan table row, yaitu satu baris mendatar.
<th> — singkatan table header cell, yaitu sel judul tebal di bagian atas kolom.
<td> — singkatan table data cell, yaitu sel biasa yang berisi konten.

Cara membayangkannya sederhana saja: tabel itu tumpukan baris (<tr>), dan setiap baris berisi deretan sel (<th> untuk header, <td> untuk data). Kamu menyusunnya baris demi baris, dari kiri ke kanan.

Membangun tabel pertamamu

Yuk kita bikin tabel kecil — daftar tiga bahasa pemrograman beserta kegunaannya:

<table>
  <tr>
    <th>Bahasa</th>
    <th>Dipakai untuk</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Struktur</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Penataan</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Perilaku</td>
  </tr>
</table>

Coba baca dari atas ke bawah, pasti langsung kelihatan alurnya:

Seluruh isinya dibungkus oleh <table>.
<tr> pertama adalah baris header — selnya pakai <th>, yang secara bawaan ditampilkan browser dengan huruf tebal dan posisi rata-tengah.
<tr> setelahnya adalah baris data, dengan sel <td> yang memuat isi sebenarnya.

Perhatikan, tiap baris punya jumlah sel yang sama (di sini dua), dan justru itulah yang bikin kolom tetap rapi sejajar. Inilah aturan emas tabel: jumlah sel di setiap baris harus sama.

th versus td — ini soal makna, bukan cuma huruf tebal

Gunakan <th> untuk sel header dan <td> untuk sel data. Betul, <th> memang otomatis tampil tebal, tapi alasan utama memakainya bukan itu, melainkan maknanya: tag ini memberi tahu pembaca layar bahwa “sel ini adalah judul untuk kolom (atau baris) di bawahnya”. Saat pengguna pembaca layar menjelajahi tabel, browser bisa membacakan header yang sesuai untuk tiap sel, sehingga mereka tidak bingung sedang berada di kolom mana. Dengan memakai <th> secara tepat, tabelmu jadi bisa dipahami semua orang.

Memberi tabel struktur: thead, tbody, dan caption

Begitu tabelmu mulai sedikit lebih besar dari sekadar tabel mungil, sebaiknya kelompokkan barisnya ke bagian head dan body, lalu beri tabel itu sebuah caption. Langkah ini membuat tabel lebih jelas sekaligus lebih ramah aksesibilitas:

<table>
  <caption>Bahasa pemrograman dan perannya</caption>
  <thead>
    <tr>
      <th>Bahasa</th>
      <th>Dipakai untuk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Struktur</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Penataan</td>
    </tr>
  </tbody>
</table>

Ada beberapa elemen baru di sini:

<caption> berfungsi sebagai judul untuk keseluruhan tabel. Letaknya tepat setelah tag pembuka <table>, dan tugasnya menjelaskan isi tabel — berguna buat siapa pun, apalagi pengguna pembaca layar.
<thead> mengelompokkan baris-baris header.
<tbody> mengelompokkan baris-baris data.

Elemen pengelompok ini sendiri memang tidak banyak mengubah tampilan, tapi ia membuat struktur tabel jadi gamblang. Hasilnya, aksesibilitas terbantu dan proses styling pun lebih mudah nantinya.

Sel yang membentang beberapa kolom atau baris

Adakalanya satu sel perlu melebar menutupi lebih dari satu kolom atau baris. Ada dua atribut yang mengurusnya:

colspan membuat sel membentang ke beberapa kolom.
rowspan membuat sel membentang ke beberapa baris.

Sebagai contoh, sel yang membentang dua kolom:

<table>
  <tr>
    <th colspan="2">Informasi Kontak</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>support@acy-partner.com</td>
  </tr>
</table>

Lewat colspan="2", sel header tadi jadi selebar dua kolom di bawahnya. rowspan jalannya persis sama, hanya saja arahnya vertikal. Kamu memang tidak akan sering memakai keduanya, tapi keduanya jadi penyelamat saat datamu benar-benar punya header gabungan atau sel yang dikelompokkan.

Kesalahan besar: jangan pakai tabel untuk tata letak halaman

Nah, ini peringatan paling penting di seluruh artikel ini. Tabel itu untuk data tabular — dan cuma untuk data tabular. Jangan sekali-kali memakainya untuk menata kerangka keseluruhan sebuah halaman.

Dulu, jauh sebelum CSS modern ada, para developer kerap menyalahgunakan tabel untuk menata letak segala hal di halaman — header ditaruh di satu sel, sidebar di sel lain, konten di sel ketiga. Secara tampilan memang jalan, tapi itu pendekatan yang keliru, dan sekarang sudah jelas dianggap salah.

Tabel untuk data, bukan untuk tata letak

Kalau kamu mulai tergoda memakai tabel untuk menempelkan sidebar di samping konten utama, atau untuk membagi halaman jadi beberapa kolom, tahan dulu. Itu pekerjaan tata letak CSS (lewat alat seperti Flexbox dan Grid), bukan pekerjaan tabel. Memaksakan tabel untuk tata letak bikin halaman jadi tidak mudah diakses — pembaca layar berusaha membaca “data” yang sebenarnya bukan data, lalu jadi kebingungan parah — sekaligus membuat halaman kaku dan susah dirawat. Patokannya gampang: kalau kontennya bukan benar-benar kisi data yang saling berkaitan, jangan pakai tabel.

Lalu bagaimana cara membedakan apakah sesuatu betul-betul data tabular? Coba tanya diri sendiri: apakah ini masuk akal kalau dijadikan spreadsheet, lengkap dengan judul kolom yang bermakna dan baris-baris berisi nilai yang saling terkait? Daftar harga, jadwal, tabel perbandingan — jelas iya. Sedangkan tata letak halaman secara umum — jelas tidak.

Contoh praktis

Sebagai penutup, mari kita buat tabel yang realistis dan mungkin benar-benar kamu pakai nanti — perbandingan paket harga sederhana:

<table>
  <caption>Perbandingan paket</caption>
  <thead>
    <tr>
      <th>Fitur</th>
      <th>Basic</th>
      <th>Pro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Penyimpanan</td>
      <td>10 GB</td>
      <td>100 GB</td>
    </tr>
    <tr>
      <td>Dukungan</td>
      <td>Email</td>
      <td>Email + telepon</td>
    </tr>
  </tbody>
</table>

Inilah persis tujuan tabel diciptakan: baris dan kolom berisi data yang benar-benar saling terkait, lengkap dengan header yang jelas. Pembaca — baik yang melihat langsung maupun yang memakai pembaca layar — bisa menyusuri satu baris untuk membandingkan, atau menelusuri satu kolom ke bawah untuk melihat semua nilai dari satu fitur. Kejelasan seperti itulah yang jadi inti sebuah tabel.

Penutup

Mulai sekarang kamu sudah bisa menyajikan data terstruktur dengan rapi:

Sebuah <table> tersusun dari baris (<tr>) yang memuat sel header (<th>) dan sel data (<td>).
Pastikan jumlah sel di tiap baris sama agar kolomnya tetap sejajar.
Gunakan <th> untuk header — fungsinya membawa makna untuk aksesibilitas, bukan cuma soal huruf tebal.
Tambahkan <caption> dan kelompokkan baris dengan <thead> serta <tbody> supaya tabel yang lebih besar tetap jelas.
Manfaatkan colspan dan rowspan saat sebuah sel perlu digabung melintasi kolom atau baris.
Jangan pernah memakai tabel untuk tata letak halaman — itu murni untuk data tabular; urusan tata letak adalah tugas CSS.

Dengan ini, elemen-elemen HTML struktural sudah lengkap. Kamu kini sudah mengupas teks, tautan, gambar, form, dan tabel — bahan-bahan dasar untuk membangun halaman sungguhan. Di penghujung section ini, kita akan melangkah ke cara menulis HTML yang lebih cermat: HTML semantik, di mana kamu memilih elemen berdasarkan makna tiap bagian halaman, bukan sekadar tampilannya.