Tabel HTML Adalah: Cara Membuat Tabel dengan table, tr, th, td

Tabel HTML adalah cara menampilkan data dalam bentuk baris dan kolom, persis seperti tabel di Excel atau di buku pelajaran. Kalau kamu punya data yang punya struktur baris-kolom (jadwal pelajaran, daftar harga, perbandingan produk, hasil pertandingan), tabel HTML adalah alat yang tepat. Di panduan ini kamu akan belajar dari nol: apa itu tabel, peran tiap tag (table, tr, th, td, thead, tbody), cara menggabung sel dengan colspan dan rowspan, sampai satu aturan penting yang sering dilanggar pemula, kapan kamu tidak boleh memakai tabel.

Tabel HTML Adalah… (Definisi Singkat)

Tabel HTML adalah kumpulan baris yang masing-masing berisi sel. Kamu tidak membuat kolom secara langsung, kolom terbentuk otomatis dari sel-sel yang sejajar di tiap baris. Jadi cara berpikirnya: kamu menulis tabel baris demi baris, dari atas ke bawah, dan browser yang menyusunnya jadi grid rapi.

Semua diawali dengan tag <table> sebagai wadahnya. Di dalamnya kamu menaruh baris-baris dengan <tr> (table row), dan di dalam tiap baris kamu menaruh sel-sel. Ada dua jenis sel: <th> untuk sel judul (header) dan <td> untuk sel data biasa.

Contoh tabel paling sederhana:

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>21</td>
  </tr>
</table>

Kalau kamu baru mulai dari HTML secara umum, ada baiknya kamu mantapkan dulu dasar-dasarnya lewat panduan belajar HTML untuk pemula sebelum masuk ke tabel, supaya konsep tag pembuka, tag penutup, dan nesting sudah nyaman buat kamu.

Anatomi Tabel HTML: Peran Tiap Tag

Sebelum menghafal, lihat dulu gambaran utuhnya. Diagram di bawah menampilkan tabel HTML sungguhan yang sudah dirender, dengan tiap bagian strukturnya diberi warna dan label:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andi</td> ...
    </tr>
  </tbody>
</table>

Sekarang mari kita bedah peran tiap tag satu per satu. Inilah “kamus” yang perlu kamu kuasai:

Poin yang paling sering bikin pemula bingung: kamu tidak menulis kolom. Tidak ada tag <column> yang kamu isi manual. Kolom muncul dengan sendirinya karena sel pertama di tiap baris berbaris jadi kolom pertama, sel kedua jadi kolom kedua, dan seterusnya. Maka pastikan jumlah sel di tiap baris konsisten.

Struktur Rapi: thead, tbody, dan tfoot

Untuk tabel kecil, <table> berisi <tr> langsung sudah cukup. Tapi begitu tabelmu punya baris judul dan banyak baris data, sebaiknya kamu kelompokkan bagiannya dengan <thead> (untuk baris judul) dan <tbody> (untuk baris data). Kalau ada baris ringkasan atau total, taruh di <tfoot>.

<table>
  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kopi</td>
      <td>Rp 18.000</td>
    </tr>
    <tr>
      <td>Teh</td>
      <td>Rp 12.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>Rp 30.000</td>
    </tr>
  </tfoot>
</table>

Menggabung Sel: colspan dan rowspan

Kadang satu sel perlu membentang melebihi satu kolom atau satu baris, misalnya judul “Kontak” yang menaungi dua kolom di bawahnya, atau nama yang berlaku untuk beberapa baris. Untuk itu ada dua atribut: colspan dan rowspan.

• colspan="2" membuat sebuah sel membentang melebar ke kanan, menempati 2 kolom sekaligus.
• rowspan="2" membuat sebuah sel membentang ke bawah, menempati 2 baris sekaligus.

Contoh colspan, satu judul menaungi dua kolom:

<table>
  <thead>
    <tr>
      <th colspan="2">Data Diri</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nama</td>
      <td>Andi</td>
    </tr>
    <tr>
      <td>Kota</td>
      <td>Bandung</td>
    </tr>
  </tbody>
</table>

Baris pertama hanya punya satu <th>, tapi karena diberi colspan="2", sel itu melebar menutupi dua kolom. Perhatikan: saat sebuah sel memakai colspan="2", kamu menulis lebih sedikit sel di baris itu, karena satu sel sudah menempati jatah dua sel.

Contoh rowspan, satu sel membentang ke bawah:

<table>
  <tbody>
    <tr>
      <td rowspan="2">Senin</td>
      <td>Matematika</td>
    </tr>
    <tr>
      <td>Bahasa Inggris</td>
    </tr>
  </tbody>
</table>

Sel “Senin” memakai rowspan="2" sehingga menempati dua baris. Akibatnya baris kedua hanya perlu satu <td> lagi, karena kolom pertamanya sudah “dipinjam” oleh sel Senin dari baris di atasnya.

Jangan Pakai Tabel untuk Layout Halaman

Ini aturan penting yang wajib kamu pegang sejak awal. Dulu, sebelum CSS matang, banyak orang memakai <table> untuk mengatur tata letak seluruh halaman, menaruh sidebar di kiri, konten di kanan, semuanya dijejalkan ke dalam sel-sel tabel. Sekarang praktik itu dianggap buruk.

Cara membedakannya sederhana: tanyakan “apakah data ini masuk akal kalau dibaca sebagai baris dan kolom?” Jadwal kereta, tabel harga, klasemen liga, ya, itu tabular. Sedangkan susunan header-konten-footer sebuah halaman? Itu bukan data tabular, itu layout, dan itu urusan CSS. Konsep memilih tag berdasarkan makna ini sama dengan yang kamu temui saat memilih level heading HTML yang tepat: strukturnya harus mencerminkan arti isinya, bukan sekadar tampilannya.

Contoh Tabel Lengkap

Mari gabungkan semuanya jadi satu tabel utuh yang rapi, lengkap dengan <thead>, <tbody>, dan satu colspan:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Kota</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andi</td>
      <td>21</td>
      <td>Bandung</td>
    </tr>
    <tr>
      <td>Sinta</td>
      <td>19</td>
      <td>Surabaya</td>
    </tr>
    <tr>
      <td colspan="3">Total peserta: 2 orang</td>
    </tr>
  </tbody>
</table>

Perhatikan baris terakhir: hanya ada satu <td> dengan colspan="3" supaya teks “Total peserta” membentang menutupi ketiga kolom. Inilah pola yang paling sering kamu pakai di dunia nyata. Kalau mau langsung praktik membangun tabel sambil melihat hasilnya secara real-time, coba pelajaran tabel HTML interaktif, kamu bisa bongkar-pasang tr, th, dan td lalu langsung melihat tabelnya terbentuk.

FAQ Tabel HTML

Apa bedanya th dan td?

<th> adalah sel judul (header), otomatis tampil tebal dan rata tengah, serta dikenali screen reader sebagai judul kolom/baris sehingga tabel lebih mudah diakses. <td> adalah sel data biasa untuk isi tabel. Pakai <th> untuk baris atau kolom judul, dan <td> untuk datanya.

Apakah wajib memakai thead dan tbody?

Tidak wajib secara teknis, tabel tetap tampil tanpa keduanya. Tapi mengelompokkan baris judul di <thead> dan baris data di <tbody> membuat struktur lebih jelas, memudahkan styling CSS, dan membantu browser menangani tabel panjang. Ini kebiasaan baik yang sebaiknya kamu bangun sejak awal.

Kapan pakai colspan dan kapan pakai rowspan?

Pakai colspan kalau kamu ingin satu sel menggabung beberapa kolom (membentang ke samping), misalnya satu judul yang menaungi dua kolom di bawahnya. Pakai rowspan kalau kamu ingin satu sel menggabung beberapa baris (membentang ke bawah), misalnya satu nama hari yang berlaku untuk beberapa baris jadwal.

Bolehkah memakai tabel untuk mengatur layout halaman?

Sebaiknya tidak. Tabel hanya untuk data yang benar-benar tabular (baris dan kolom yang bermakna). Untuk mengatur tata letak halaman, sidebar, grid, navigasi, gunakan CSS Flexbox atau Grid. Memakai tabel untuk layout merusak aksesibilitas dan menyulitkan tampilan responsif.

Langkah Selanjutnya

Sekarang kamu sudah paham fondasi tabel HTML: <table> sebagai wadah, <tr> untuk baris, <th> untuk sel judul, <td> untuk sel data, <thead>/<tbody>/<tfoot> untuk mengelompokkan, serta colspan dan rowspan untuk menggabung sel. Yang tersisa adalah latihan sampai kamu bisa menulisnya tanpa mencontek.

Cara tercepat menempelkannya adalah praktik langsung. Buka pelajaran tabel HTML interaktif dan bangun tabelmu sendiri, mulai dari tabel dua kolom sederhana, lalu tambahkan header, lalu coba gabungkan sel dengan colspan. Begitu tabel terasa nyaman, langkah berikutnya adalah mempercantiknya dengan CSS: memberi garis, warna baris selang-seling, dan padding yang pas. Selamat mencoba!