Belajar Tabel HTML Dasar: table, tr, td, th

Pernah Bingung Bikin Tabel di HTML? Ini Masalah yang Sering Terjadi

Banyak pemula yang awalnya semangat belajar HTML, tapi langsung mentok saat ketemu bagian tabel. Kelihatannya sederhana, tapi pas mulai nulis kode malah jadi berantakan, kolom nggak sejajar, baris kacau, bahkan tabelnya nggak tampil sama sekali.

Kalau kamu pernah ngalamin hal itu, santai… kamu nggak sendirian. Tabel HTML memang terlihat mudah, tapi kalau tidak paham struktur dasarnya, hasilnya bisa bikin pusing.

Di artikel ini, saya akan bantu kamu memahami tabel HTML dari nol, mulai dari konsep dasar, cara kerja setiap tag, sampai contoh nyata yang bisa langsung kamu praktikkan.

Apa Itu Tabel HTML?

Tabel HTML adalah elemen yang digunakan untuk menampilkan data dalam bentuk baris dan kolom, seperti tabel di Excel atau Word.

Biasanya digunakan untuk:

  • Menampilkan data (nilai, daftar, laporan)
  • Membuat layout data terstruktur
  • Menyusun informasi yang mudah dibaca

Dalam HTML, tabel dibuat menggunakan beberapa tag utama yang saling berhubungan.

Struktur Dasar Tabel HTML

Sebuah tabel HTML terdiri dari 4 tag utama:

  • <table> → pembungkus tabel
  • <tr> → baris (table row)
  • <td> → isi data (table data)
  • <th> → header (judul kolom)

Contoh paling sederhana: 


<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Adi</td>
    <td>25</td>
  </tr>
</table>

Penjelasan Setiap Tag (Versi Super Sederhana)

1. Tag <table>

Ini adalah wadah utama dari tabel.

Tanpa tag ini, browser tidak akan mengenali struktur tabel.

2. Tag <tr> (Table Row)

Digunakan untuk membuat baris dalam tabel.

Setiap <tr> = satu baris.

3. Tag <td> (Table Data)

Digunakan untuk mengisi data dalam tabel.

Setiap <td> = satu kolom dalam baris.

4. Tag <th> (Table Header)

Digunakan untuk judul kolom.

Biasanya teksnya otomatis tebal dan berada di tengah.

Contoh Tabel HTML Lengkap

Sekarang kita buat tabel yang sedikit lebih realistis. 


<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Pekerjaan</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Adi</td>
    <td>Programmer</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Budi</td>
    <td>Designer</td>
  </tr>
</table>

Penjelasan Kode

  • border="1" → menampilkan garis tabel
  • Baris pertama → header tabel
  • Baris berikutnya → isi data

Hubungan Baris dan Kolom (Hal Penting)

Ini yang sering bikin pemula salah:

Jumlah <td> dalam setiap <tr> harus sama.

Contoh salah: 


<tr>
  <td>Adi</td>
</tr>
<tr>
  <td>Budi</td>
  <td>25</td>
</tr>

Ini akan membuat tabel jadi tidak rapi.

Perbedaan <td> dan <th>

Tag Fungsi
<td> Isi data biasa
<th> Judul kolom (header)

Gunakan <th> untuk bagian judul agar tabel lebih mudah dibaca.

Kesalahan Umum Saat Membuat Tabel

  • Lupa menutup tag
  • Jumlah kolom tidak sama
  • Salah urutan tag
  • Menaruh <td> di luar <tr>

Kalau tabel kamu error, kemungkinan besar ada di sini.

Tips Penting Agar Tabel Rapi

  • Gunakan indentasi (rapikan kode)
  • Pastikan jumlah kolom konsisten
  • Gunakan <th> untuk header
  • Gunakan CSS untuk desain (jangan hanya HTML)

Kapan Harus Menggunakan Tabel?

Gunakan tabel hanya untuk data terstruktur, seperti:

  • Daftar harga
  • Data siswa
  • Laporan

Jangan gunakan tabel untuk layout website (ini kesalahan lama).

Kesimpulan

Tabel HTML sebenarnya sangat sederhana jika kamu memahami strukturnya:

  • <table> → pembungkus
  • <tr> → baris
  • <td> → isi
  • <th> → judul

Kalau kamu sudah paham ini, kamu sudah punya dasar yang kuat untuk mengolah data di HTML.

Langkah berikutnya, kamu bisa belajar styling tabel dengan CSS agar tampil lebih profesional.

Label: