html5 table

📚 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!

1

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>

2

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!

3

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.

4

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 →

Artikel 6: Semantic HTML5: Susun Layout Halaman yang Bermakna & SEO-Friendly

Lanjut belajar 🏗️

html5 image media

📚 Seri Belajar HTML5 — Artikel 4 dari 13

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

Pelajari cara menggunakan tag <img>, <video>, dan <audio> HTML5 untuk menghidupkan halaman web kamu dari nol.

#TagImg #VideoHTML #AudioHTML #HTML5 #MediaWeb

⏱️ Estimasi Baca: 10–13 menit

🎯 Level: Pemula Mutlak

📅 Diperbarui: 2026

Pernah nggak kamu membuka website yang isinya cuma teks polos semua — kayak baca dokumen Word tahun 2001? Betul, membosankan banget. Nah, inilah alasan kenapa memahami cara menyisipkan gambar HTML5 itu bukan sekadar skill opsional — ini adalah fondasi visual sebuah halaman web yang hidup dan menarik.

Di artikel ke-4 dari Seri Belajar HTML5 From Zero to Zorro — 13 Artikel ini, kita akan belajar tiga media paling penting dalam dunia web: gambar, video, dan audio. Ketiganya punya tag HTML5 masing-masing, dan kamu akan kuasai semuanya hari ini — dijamin lewat praktik langsung, bukan teori kosong.

Siap bikin halamanmu lebih kaya visual? Yuk mulai! 🚀

🖼️ Cara Menyisipkan Gambar HTML5 dengan Tag <img>

Bayangkan halaman web kamu itu seperti majalah. Tanpa foto, majalah itu terasa datar — nggak ada yang bikin mata berhenti scroll. Di HTML5, cara menyisipkan gambar dilakukan dengan satu tag sederhana: <img>.

📐 Formula Utama

Tag <img> adalah self-closing tag — artinya tidak butuh tag penutup. Ia punya dua atribut wajib yang harus selalu ada:

• src — alamat/path file gambar (bisa URL atau nama file lokal)
• alt — teks alternatif jika gambar gagal tampil (juga penting untuk SEO & aksesibilitas)

Mari kita lihat praktiknya langkah demi langkah:

1

Simpan file gambar di folder yang sama dengan file HTML kamu

Misalnya, simpan file bernama kucing.jpg di folder yang sama dengan index.html.

2

Tulis tag <img> di dalam body HTML kamu

Tambahkan atribut src dan alt di dalam tag tersebut.

3

Atur ukuran gambar dengan atribut width dan height (opsional tapi disarankan)

Ini mencegah halaman "melompat" saat gambar sedang loading — istilahnya Cumulative Layout Shift (CLS).

index.html

HTML5

<!-- Gambar dari file lokal -->
<img src="kucing.jpg"
     alt="Foto kucing oranye sedang tidur"
     width="600"
     height="400">

<!-- Gambar dari URL internet -->
<img src="https://example.com/foto.jpg"
     alt="Deskripsi foto dari internet"
     width="800"
     height="450">

<!-- Gambar responsif dengan CSS -->
<img src="banner.png"
     alt="Banner halaman utama"
     style="max-width: 100%; height: auto;">

💡 Tips Alt Text SEO-Friendly

Atribut alt bukan cuma basa-basi! Google menggunakannya untuk memahami isi gambar kamu. Tulis deskripsi yang jelas dan spesifik. Jangan: "foto1.jpg". Yang benar: "Resep nasi goreng kampung dengan telur mata sapi dan kerupuk".

📋 Atribut Penting Tag <img>

Atribut	Wajib?	Fungsi	Contoh Nilai
src	✅ Ya	Sumber/alamat file gambar	"foto.jpg"
alt	✅ Ya	Teks alternatif & aksesibilitas	"Deskripsi gambar"
width	Opsional	Lebar gambar (piksel)	"600"
height	Opsional	Tinggi gambar (piksel)	"400"
loading	Opsional	Lazy load untuk performa	"lazy"

🔥 Fakta Menarik

Menurut data HTTP Archive, rata-rata halaman web di internet berisi lebih dari 900 KB gambar — lebih dari separuh total ukuran halaman! Artinya, mengoptimalkan gambar (format WebP, lazy loading) langsung berdampak besar pada kecepatan sitemu.

🎬 Tag Video HTML5: Menyematkan Video Tanpa Plugin

Ingat jaman dulu harus install Flash Player buat nonton video di website? Syukurlah era itu sudah berakhir. HTML5 hadir dengan tag <video> yang memungkinkan kamu memutar video langsung di browser — tanpa plugin apapun!

Analoginya sederhana: kalau tag <img> itu seperti memasang foto di bingkai, maka tag <video> itu seperti memasang TV layar datar di dinding ruang tamumu — lengkap dengan remote control (kontrol play/pause/volume).

📐 Anatomi Tag <video>

Tag <video> berbeda dari <img> — ia punya tag pembuka dan penutup, serta mendukung tag <source> di dalamnya untuk mendukung berbagai format video sekaligus.

• controls — menampilkan tombol play, pause, volume, dan fullscreen
• autoplay — video langsung putar saat halaman dibuka (gunakan dengan bijak!)
• loop — video berulang terus menerus
• muted — video tanpa suara (wajib jika autoplay di browser modern)
• poster — gambar thumbnail sebelum video diputar

video-example.html

HTML5

<!-- Video dasar dengan kontrol -->
<video width="640" height="360"
       controls
       poster="thumbnail.jpg">

  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">

  <!-- Teks ini muncul jika browser tidak support -->
  Browser kamu tidak mendukung tag video HTML5.
</video>

<!-- Video autoplay untuk background (muted wajib!) -->
<video autoplay loop muted
       style="width: 100%; height: auto;">
  <source src="background.mp4" type="video/mp4">
</video>

⚠️ Perhatian: Autoplay Browser Policy

Sejak tahun 2018, hampir semua browser modern (Chrome, Firefox, Safari) memblokir video yang autoplay dengan suara. Agar autoplay berjalan, kamu wajib menambahkan atribut muted bersamanya. Ini kebijakan browser, bukan bug HTML5 kamu!

⚡ Format Video: Pilih yang Mana?

🎥

MP4 (H.264)

Format paling kompatibel. Gunakan ini sebagai pilihan utama.

🌐

WebM (VP9)

Ukuran lebih kecil, kualitas lebih baik. Didukung Chrome & Firefox.

🍎

OGV (Theora)

Open source, namun kualitas kalah dari dua format di atas.

💡 Best practice: sertakan minimal MP4 + WebM menggunakan dua tag <source> agar semua browser tertangani.

🎵 Tag Audio HTML5: Menyisipkan Musik dan Suara di Web

Kalau tag <video> itu seperti TV, maka tag <audio> itu seperti radio atau speaker bluetooth yang bisa kamu embed langsung di halaman web. Kegunaannya luas: dari background music, efek suara game, podcast, hingga audio tutorial.

Yang menarik, sintaks tag <audio> HTML5 hampir identik dengan <video> — bedanya hanya tidak ada atribut poster dan width/height karena audio memang tidak punya tampilan visual.

1

Siapkan file audio dalam format yang didukung browser

Format yang aman: MP3 (paling kompatibel), WAV (kualitas terbaik, ukuran besar), OGG (open source, ukuran kecil).

2

Gunakan tag <audio> dengan atribut controls

Tanpa atribut controls, player audio tidak akan tampil dan pengguna tidak bisa berinteraksi.

3

Sertakan multiple <source> untuk fallback format

Browser akan memilih format yang pertama kali bisa ia putar, dari atas ke bawah. Ini strategi "graceful degradation" yang profesional.

audio-example.html

HTML5

<!-- Audio player dasar -->
<audio controls>
  <source src="lagu.mp3" type="audio/mpeg">
  <source src="lagu.ogg" type="audio/ogg">
  Browser kamu tidak mendukung audio HTML5.
</audio>

<!-- Audio autoplay + loop (misal: background music) -->
<audio autoplay loop muted>
  <source src="ambient.mp3" type="audio/mpeg">
</audio>

<!-- Audio dengan preload untuk performa -->
<audio controls preload="metadata">
  <source src="podcast.mp3" type="audio/mpeg">
</audio>

⚡ Insight: Atribut preload

Atribut preload punya tiga nilai yang perlu kamu pahami: none (jangan load dulu sampai diklik), metadata (load info durasi/codec saja), dan auto (load seluruh file). Untuk podcast panjang, gunakan metadata agar tidak boros data pengunjung!

🔗 Bonus: Menyematkan Video YouTube dan Tag <figure>

Selain meng-host file video sendiri (yang bisa mahal dan berat), cara paling populer dan efisien adalah menyematkan video langsung dari YouTube menggunakan tag <iframe>. Ini juga teknik yang digunakan hampir 90% website di seluruh dunia untuk menyematkan konten video.

embed-youtube.html

HTML5 + iframe

<!-- Embed video YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Judul Video Tutorial HTML5"
  frameborder="0"
  allowfullscreen>
</iframe>

<!-- Gambar dengan keterangan menggunakan <figure> -->
<figure>
  <img src="diagram-html.png"
       alt="Diagram struktur tag HTML5"
       width="600" height="400">
  <figcaption>Gambar 1: Diagram lengkap struktur HTML5</figcaption>
</figure>

💡 Tips: Gunakan <figure> dan <figcaption>

Tag <figure> dan <figcaption> adalah pasangan semantik HTML5 untuk gambar beserta keterangannya. Ini jauh lebih baik dari sekadar meletakkan teks di bawah tag <img> biasa — Google pun memahaminya sebagai satu unit konten yang bermakna.

🎉

Kesimpulan: Web Tanpa Media Itu Seperti Film Bisu

Di artikel ini kamu sudah menguasai tiga kekuatan visual HTML5 yang akan mengubah halaman web dari sekadar teks jadi pengalaman yang hidup dan interaktif:

🖼️

Tag <img> — cara menyisipkan gambar HTML5

Atribut src & alt wajib, gunakan width/height untuk mencegah layout shift.

🎬

Tag <video> — embed video langsung tanpa plugin

Gunakan multiple <source> (MP4+WebM), dan muted jika autoplay.

🎵

Tag <audio> — player audio yang mudah dikustomisasi

Sertakan format MP3 + OGG, gunakan preload="metadata" untuk hemat data.

Ini adalah bagian dari perjalanan panjang Seri Belajar HTML5 From Zero to Zorro — 13 Artikel. Artikel berikutnya kita akan masuk ke dunia tabel data yang terstruktur — siap-siap!

💬 Punya pertanyaan tentang tag video audio HTML5? Tulis di kolom komentar di bawah!

💬 Tinggalkan Komentar 📤 Share Artikel Ini

🏷️ Tags Artikel

#HTML #HTML5 #TagImg #VideoHTML #AudioHTML #Media #BelajarHTML

📚

Indeks Lengkap Seri

HTML5 From Zero to Zorro — 13 Artikel

Lihat semua topik dan navigasi antar artikel di halaman indeks utama →

🧭 Navigasi Seri Artikel

← Artikel Sebelumnya

Artikel 3 dari 13

Daftar & Tautan: Bikin Navigasi & List yang Rapi

Artikel Selanjutnya →

Artikel 5 dari 13

Tabel Data: Menyajikan Informasi Terstruktur dengan Tag Table HTML5