tabeltabletrtdMenengah3 mnt baca

Tabel Dasar: table, tr, td

Bikin tabel pertamamu: struktur table, baris tr, dan sel td, plus border agar terlihat.

Analogi: Daftar Absen di Papan Tulis

Ingat papan tulis di kelas yang berisi jadwal pelajaran? Kolomnya hari, barisnya jam, dan setiap kotak pertemuan keduanya berisi nama mapel. Atau buku absen wali kelas: kolom nama siswa, kolom keterangan hadir atau alpa. Itulah data tabular: informasi yang baru bermakna kalau baris dan kolomnya dibaca bersamaan. Tag <table> di HTML adalah cara mengubah susunan seperti itu menjadi halaman web.

Kenapa Tabel Ada

Masalah yang dipecahkan tabel: sebagian data tidak bisa diungkapkan dengan paragraf atau list biasa. Coba tulis jadwal pelajaran lima hari dalam bentuk paragraf, pasti membingungkan. Dalam bentuk tabel, mata langsung bisa membandingkan: hari apa, jam berapa, mapel apa. Tabel memberi struktur dua dimensi (baris × kolom) yang tidak dimiliki elemen HTML lain.

Satu batasan penting sejak awal: tabel hanya untuk data tabular, yaitu data yang memang berbentuk baris dan kolom yang saling terkait, seperti jadwal, daftar harga, atau klasemen. Jangan pernah memakai tabel untuk mengatur layout halaman (misalnya menaruh sidebar di samping konten). Itu praktik dari tahun 2000-an yang sudah mati dan digantikan CSS.

Contoh 1: Tabel Paling Sederhana

Struktur tabel hanya butuh tiga tag yang saling bersarang:

html

<table>
  <tr>
    <td>Baris 1, Sel 1</td>
    <td>Baris 1, Sel 2</td>
  </tr>
  <tr>
    <td>Baris 2, Sel 1</td>
    <td>Baris 2, Sel 2</td>
  </tr>
</table>

<table>: pembungkus keseluruhan tabel.
<tr>: table row, satu baris horizontal.
<td>: table data, satu sel di dalam baris.

Pola membacanya selalu sama: di dalam table ada beberapa tr, dan di dalam tiap tr ada beberapa td. Tanpa CSS, tabel tampil tanpa garis sehingga terlihat seperti teks biasa yang tersusun rapi. Untuk latihan, tambahkan atribut border="1" sementara agar garisnya kelihatan. Nanti di seri CSS kamu akan menggantinya dengan styling yang proper.

Contoh 2: Tabel Realistis (Daftar Harga)

Sekarang contoh yang lebih mirip tabel sungguhan, yaitu daftar harga minuman warkop:

html

<table border="1">
  <tr>
    <td>Kopi Tubruk</td>
    <td>Rp15.000</td>
  </tr>
  <tr>
    <td>Kopi Susu</td>
    <td>Rp18.000</td>
  </tr>
  <tr>
    <td>Es Teh</td>
    <td>Rp8.000</td>
  </tr>
  <tr>
    <td>Teh Hangat</td>
    <td>Rp5.000</td>
  </tr>
</table>

Perhatikan polanya: tiap baris (tr) berisi dua sel (td), kolom pertama nama menu dan kolom kedua harga. Konsistensi inilah yang membuat tabel enak dibaca: mata pembaca langsung tahu kolom kiri selalu nama dan kolom kanan selalu harga, tanpa perlu berpikir ulang di tiap baris.

Kesalahan Umum Pemula

SALAH: jumlah sel tiap baris tidak sama.

html

<table border="1">
  <tr>
    <td>Senin</td>
    <td>Matematika</td>
    <td>07.00</td>
  </tr>
  <tr>
    <td>Selasa</td>
    <td>IPA</td>
  </tr>
</table>

Baris pertama punya 3 sel, baris kedua cuma 2. Browser tetap merendernya, tapi tabelnya "bocor": kolomnya tidak sejajar dan tampilannya berantakan. Ini aturan emas tabel: setiap baris harus punya jumlah sel yang sama. (Satu-satunya pengecualian adalah colspan dan rowspan, yang dibahas di modul tersendiri.)

BENAR: samakan jumlah td di semua tr, atau isi sel yang kosong dengan td kosong (<td></td>).

SALAH: memakai tabel untuk layout halaman.

html

<table>
  <tr>
    <td>Menu navigasi di sini</td>
    <td>Artikel utama di sini</td>
  </tr>
</table>

Kelihatannya praktis, tapi ini data tabular atau layout? Ini layout, jadi salah pakai. Akibatnya: screen reader membacakannya seperti data (membingungkan pengguna tunanetra), tampilannya rusak di HP, dan kodenya susah dirawat. Untuk layout, pakai <div> dengan CSS, bukan tabel.

Catatan teknis: Atribut border, cellpadding, dan cellspacing sebenarnya sudah usang (deprecated). Boleh dipakai saat latihan agar tabel terlihat, tapi di proyek nyata semua styling tabel dikerjakan dengan CSS.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tabel Jadwal Pelajaran

Buat tabel 3 baris × 3 kolom berisi jadwal pelajaranmu (Hari, Jam, Mapel). Tiap baris wajib punya jumlah sel sama. Tambahkan border="1" agar terlihat. Menguasai struktur table/tr/td adalah fondasi wajib sebelum belajar CSS: hampir semua dashboard, laporan, dan halaman admin di dunia nyata menampilkan data dalam bentuk tabel.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Jadwal</title>
</head>
<body>
  <h1>Jadwal Pelajaran</h1>
  <!-- tabel di sini -->
</body>
</html>

Open Sandbox