HTML19 / 46

Tabel dasar

Tabel dipakai untuk data tabular — data yang hubungan baris dan kolomnya bermakna, bukan untuk mengatur tata letak halaman. <table> berisi baris <tr>, dan di dalam baris ada sel data <td> atau sel header <th>. <th> bukan sekadar teks tebal: screen reader memakainya untuk mengumumkan konteks kolom saat pengguna berpindah antar sel, sehingga angka tetap bisa dipahami tanpa melihat layar. Memakai tabel untuk layout adalah praktik lama yang merusak tampilan di HP dan menyulitkan pengguna screen reader.

👀 Contoh dulu

<table>
  <tr>
    <th>Produk</th>
    <th>Stok</th>
  </tr>
  <tr>
    <td>Kopi</td>
    <td>12</td>
  </tr>
</table>

Hasilnya: Tabel 2 kolom: baris pertama header (tebal, di tengah), baris kedua data biasa.

💡 Struktur berlapis: table membungkus tr (baris), tr membungkus th/td (sel). Satu tr = satu baris.

📝 Sekarang giliranmu

Buat tabel dengan 1 baris header (<th> berisi Nama dan Umur) dan 1 baris data (<td> berisi Bimo dan 20).

Preview