Tabel menyusun data dalam baris dan kolom, kayak daftar harga di warung atau jadwal pelajaran. Di HTML, tabel dibangun dari dalam ke luar: sel-sel dikumpulkan jadi satu baris, lalu baris-baris itu dikumpulkan di dalam <table>.
🧪 Tebakan cepat: di tabel HTML, kamu menulis kolom dulu atau baris dulu? Tebak dulu, jawabannya ada di bagian "Tabel ditulis baris per baris".
Tabel ditulis baris per baris
<table>
<thead>
<tr>
<th scope="col">Menu</th>
<th scope="col">Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nasi Goreng</td>
<td>Rp 15.000</td>
</tr>
<tr>
<td>Es Teh Manis</td>
<td>Rp 5.000</td>
</tr>
</tbody>
</table>
Mulai dari empat tag intinya:
<table>membungkus seluruh tabel.<tr>(table row) adalah satu baris. HTML gak punya tag buat kolom: kamu menulis baris demi baris, dan kolomnya terbentuk dari urutan sel di tiap baris. Sel pertama di tiap baris jadi kolom pertama, sel kedua jadi kolom kedua.<th>(table header) adalah sel judul. Browser menampilkannya tebal dan rata tengah.<td>(table data) adalah sel isi biasa.
Tiap <th> dan <td> harus ada di dalam <tr>, dan tiap baris sebaiknya punya jumlah sel yang sama biar kolomnya lurus. Hasilnya: tabel dua kolom, Menu dan Harga, dengan dua baris menu di bawahnya.
Pisahkan judul dan isi: <thead> dan <tbody>
<thead>membungkus baris judul.<tbody>membungkus baris-baris data.
Di dalam keduanya tetap ada <tr> dengan sel-selnya. Jadi urutan bungkusnya: <table>, lalu <thead> atau <tbody>, lalu <tr>, lalu <th> atau <td>.
Tampilannya gak berubah, tapi browser, screen reader (program yang membacakan halaman buat pengguna tunanetra), dan mesin pencari jadi tahu mana judul dan mana isi. Kalau tabel panjang dicetak sampai beberapa halaman, browser bisa mengulang baris <thead> di atas tiap halaman.
scope: judul kolom atau judul baris
<th scope="col">artinya sel ini judul buat kolom di bawahnya.<th scope="row">artinya sel ini judul buat baris di sebelahnya, misalnya nama hari di awal tiap baris jadwal.
Dengan scope, screen reader bisa membacakan judulnya bersama tiap sel, misalnya "Harga, Rp 15.000". Judul untuk seluruh tabel ditulis pakai <caption>, tepat sesudah <table>.
⚠️ Jebakan yang sering ketemu
- Sel ditulis langsung di
<table>.<td>tanpa<tr>bikin browser menyusun barisnya sendiri, dan hasilnya sering beda dari yang kamu mau. - Jumlah sel per baris beda-beda. Kolomnya jadi bolong atau bergeser.
- Huruf besar-kecil di isi sel. Kalau latihan minta
table, sel berisiTabledianggap beda. - Baris judul pakai
<td>. Tampilannya biasa saja dan screen reader gak tahu itu judul. Pakai<th>. - Tabel buat tata letak halaman.
<table>cuma buat data yang memang berbentuk tabel. Menyusun halaman itu tugas CSS Grid atau Flexbox.
TL;DR: Tabel ditulis baris per baris: <table> membungkus semuanya, <tr> satu baris, <th> sel judul, <td> sel data. Baris judul dibungkus <thead>, baris data dibungkus <tbody>. scope="col" menandai judul kolom, scope="row" judul baris. Isi sel ditulis persis, huruf besar-kecilnya juga.
