📚 Seri Belajar HTML5 · Artikel 5 dari 13

Tabel Data: Menyajikan
Informasi Terstruktur
dengan Tag Table HTML5

Dari jadwal pelajaran hingga laporan keuangan — semua bisa kamu buat dengan cara membuat tabel HTML5 yang baik dan benar. Yuk, kuasai tag table HTML dari nol!

#HTML5 #TabelHTML #TagTable #BelajarHTML

⏱️

Estimasi Baca

8 Menit

🎯

Level

Pemula

📅

Diperbarui

2026

Pernah nggak kamu lihat jadwal kereta, daftar harga produk, atau scoreboard game favorit yang tersusun rapi baris per baris? Nah, di balik tampilan yang kelihatannya sederhana itu, ada seorang developer yang tahu persis cara membuat tabel HTML5 dengan benar. Tabel bukan sekadar kisi-kisi kotak — tabel adalah cara paling efektif menyajikan data yang punya hubungan satu sama lain.

Artikel ini adalah bagian ke-5 dari Seri Belajar HTML5 From Zero to Zorro — 13 Artikel. Setelah di artikel sebelumnya kamu belajar soal gambar dan media, sekarang saatnya data tampil rapi dengan tag table HTML. Siap? Mari kita mulai!

📐 Konsep Utama

Tabel HTML adalah struktur data dua dimensi yang terdiri dari baris (row) dan kolom (column), dibentuk menggunakan tag <table>.

Setiap tabel terdiri dari baris <tr>, header <th>, dan data <td>.

🧩 Anatomi Tag Table HTML: Belajar dari Lembar Spreadsheet

Bayangkan kamu punya buku catatan rapor sekolah. Ada kolom "Mata Pelajaran", "Nilai UTS", "Nilai UAS". Ada baris untuk setiap siswa. Nah, itulah tabel! Bedanya, di HTML kita menulisnya dalam kode — dan itulah inti dari tag table HTML.

Sebelum nulis kode, kita perlu kenalan dulu sama 5 tag utama dalam cara membuat tabel HTML5:

Tag	Nama	Fungsi	Analogi
`<table>`	Table	Wadah utama seluruh tabel	Seluruh buku rapor
`<tr>`	Table Row	Satu baris horizontal	Satu halaman siswa
`<th>`	Table Header	Sel judul kolom (bold + center)	Label kolom di rapor
`<td>`	Table Data	Sel isi data biasa	Nilai tiap mata pelajaran
`<caption>`	Caption	Judul/keterangan tabel	Judul cover buku rapor

🔥

Fakta Menarik

Di era awal internet (1990-an), tabel HTML dipakai untuk layout seluruh halaman web! Sebelum CSS dan Flexbox ada, developer menggunakan tabel bersarang yang super rumit hanya untuk mengatur posisi konten. Sekarang praktik ini sudah tidak dianjurkan — tabel hanya untuk data tabular.

🛠️ Cara Membuat Tabel HTML5: Panduan Step-by-Step

Oke, teori sudah cukup. Sekarang kita mulai praktek cara membuat tabel HTML5 dari yang paling sederhana sampai yang lebih kompleks. Ikuti langkah-langkahnya satu per satu!

Buat Kerangka Tabel Dasar

Mulailah dengan tag <table> sebagai wadah. Di dalamnya, buat baris header dengan <tr> dan isi dengan <th>.

📄 tabel-dasar.html HTML

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
    <th>Status</th>
  </tr>
</table>

Tambahkan Baris Data dengan <td>

Setelah header, tambahkan baris data. Setiap <tr> baru = satu baris data. Isi tiap sel dengan <td>.

📄 tabel-dengan-data.html HTML

<table border="1">
  <!-- Baris Header -->
  <tr>
    <th>Nama</th>
    <th>Nilai</th>
    <th>Status</th>
  </tr>
  <!-- Baris Data 1 -->
  <tr>
    <td>Budi</td>
    <td>85</td>
    <td>Lulus</td>
  </tr>
  <!-- Baris Data 2 -->
  <tr>
    <td>Siti</td>
    <td>92</td>
    <td>Lulus</td>
  </tr>
</table>

💡

Tips

Jumlah <td> dalam setiap <tr> harus sama dengan jumlah <th> di header. Jika tidak sama, tampilan tabelmu akan berantakan. Hitung selalu sebelum save!

Struktur Semantik: <thead>, <tbody>, <tfoot>

HTML5 mendorong kita untuk menulis kode yang bermakna. Bungkus baris headermu dengan <thead>, baris data dengan <tbody>, dan baris total/catatan dengan <tfoot>.

📄 tabel-semantik.html HTML5

<table>
  <caption>Daftar Nilai Kelas 10A</caption>

  <thead>
    <tr>
      <th>Nama</th>
      <th>Nilai UTS</th>
      <th>Nilai UAS</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Budi</td>
      <td>80</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Siti</td>
      <td>88</td>
      <td>92</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Rata-rata</td>
      <td>84</td>
      <td>88.5</td>
    </tr>
  </tfoot>

</table>

🔀 Colspan & Rowspan: Gabungkan Sel dengan Elegan

Pernah lihat tabel dengan sel yang "lebih lebar" atau "lebih tinggi" dari sel lain? Itulah keajaiban colspan dan rowspan — dua atribut yang bikin tag table HTML-mu jadi jauh lebih ekspresif.

⚡ Analisis: Colspan vs Rowspan

📐 colspan="N"

Menggabungkan N kolom secara horizontal. Seperti "melebarkan" satu sel ke kanan.

colspan="2" → sel selebar 2 kolom

📏 rowspan="N"

Menggabungkan N baris secara vertikal. Seperti "memanjangkan" sel ke bawah.

rowspan="3" → sel setinggi 3 baris

📄 colspan-rowspan.html HTML5

<table border="1">
  <tr>
    <!-- Judul yang mencakup 3 kolom -->
    <th colspan="3">Jadwal Pelajaran Kelas 10A</th>
  </tr>
  <tr>
    <th>Senin</th>
    <th>Selasa</th>
    <th>Rabu</th>
  </tr>
  <tr>
    <td>Matematika</td>
    <!-- Sel ini mencakup 2 baris -->
    <td rowspan="2">Olahraga</td>
    <td>Fisika</td>
  </tr>
  <tr>
    <td>Kimia</td>
    <!-- Kolom ke-2 otomatis diisi rowspan -->
    <td>Biologi</td>
  </tr>
</table>

⚠️

Perhatian

Saat menggunakan rowspan, kamu harus mengurangi jumlah <td> di baris berikutnya! Kalau sel sudah "diisi" rowspan dari baris atas, kamu tidak perlu menambahkan <td> lagi untuk posisi itu. Ini sumber bug paling sering pada tabel kompleks.

🎨 Styling Tabel HTML5: Dari Membosankan Jadi Memukau

Tabel bawaan HTML memang terlihat jadul — garis kotak-kotak yang kaku. Tapi dengan CSS, tabel bisa jadi komponen yang sangat elegan. Ini contoh cara membuat tabel HTML5 yang modern:

📄 tabel-modern.html HTML5 + CSS

<table style="width:100%; border-collapse:collapse;">
  <thead>
    <tr>
      <th style="background:#6366f1; color:white; padding:12px;">
        Produk
      </th>
      <th style="background:#6366f1; color:white; padding:12px;">
        Harga
      </th>
    </tr>
  </thead>
  <tbody>
    <tr style="background:#f8fafc;">
      <td style="padding:12px; border-bottom:1px solid #e2e8f0;">
        Laptop
      </td>
      <td style="padding:12px; border-bottom:1px solid #e2e8f0;">
        Rp 8.000.000
      </td>
    </tr>
  </tbody>
</table>

⚡

Insight Penting

Selalu gunakan border-collapse: collapse di CSS tabelmu! Tanpa ini, setiap sel akan punya border ganda yang terlihat jelek. Property ini "menggabungkan" border yang bersebelahan menjadi satu garis bersih.

♿ Tabel HTML5 yang Accessible & SEO-Friendly

Membuat tabel bukan cuma soal tampilan — tapi juga soal siapa yang bisa mengakses informasinya. Screen reader (alat bantu untuk tunanetra) membaca tabel baris per baris. Kalau strukturmu berantakan, pengguna screen reader akan kebingungan.

Tambahkan Atribut scope pada <th>

Atribut scope memberi tahu browser dan screen reader apakah header ini untuk kolom (col) atau baris (row). Ini praktik terbaik untuk tabel yang bermakna.

📄 tabel-accessible.html

<thead>
  <tr>
    <th scope="col">Nama Siswa</th>
    <th scope="col">Nilai</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Budi</th>
    <td>85</td>
  </tr>
</tbody>

💡

Tips SEO

Google bisa membaca dan mengindeks konten tabelmu! Pastikan <caption> mengandung kata kunci yang relevan, dan isi <th> jelas mendeskripsikan data di bawahnya. Tabel yang terstruktur baik bisa muncul sebagai featured snippet di hasil pencarian Google.

✅ Rangkuman

Sekarang Kamu Sudah Bisa Membuat Tabel HTML5!

✅ 5 tag utama tabel HTML

✅ Struktur semantik thead/tbody/tfoot

✅ colspan & rowspan untuk sel kompleks

✅ Styling modern & aksesibilitas

Dengan menguasai cara membuat tabel HTML5 yang benar — mulai dari struktur dasar, semantik, hingga styling — kamu sudah satu langkah lebih dekat menjadi web developer yang andal. Tabel bukan hanya kisi-kisi biasa; ini adalah alat komunikasi data yang powerful ketika digunakan dengan tepat!

💬 Yuk diskusi! Pernah bingung soal colspan atau rowspan? Drop pertanyaanmu di kolom komentar di bawah. Share artikel ini ke teman yang lagi belajar HTML juga, ya! Dan jangan lupa subscribe biar nggak kelewatan artikel selanjutnya.

📚 Lihat Semua 13 Artikel Seri

🏷️ Tags

#HTML #HTML5 #TabelHTML #TagTable #BelajarHTML #DataWeb

📗

Halaman Utama Seri

HTML5 From Zero to Zorro — 13 Artikel

saifiahmada.com → Lihat semua artikel seri →

🧭 Navigasi Artikel

← Artikel Sebelumnya

Artikel 4: Gambar & Media: Menyisipkan Foto, Video, dan Audio ke Halaman Web

🖼️ Baca artikel ini

Artikel Selanjutnya →