Lompat ke konten utama

Kompetisi Ajak Teman: hadiah total Rp1.000.000 tunai untuk 3 pengajak terbanyak. Berakhir 29 November 2026. Ikut kompetisi

←

Bangun Halaman Web Pertamamu

Pelajaran 9 dari 14

Tabel dan formulir

Tabel data: baris, kolom, dan judul kolom

Setelah pelajaran ini kamu bisa menyusun tabel data dengan caption, thead, judul kolom ber-scope, dan baris data.

±14 menitDiperiksa 25 Sep 2026

Materi

Tabel dipakai untuk data yang punya baris dan kolom: daftar harga, jadwal, rekap simpanan. Elemen table membungkus seluruhnya, tr membuat satu baris, td membuat satu sel data, dan th membuat sel judul. Browser menampilkan isi th tebal dan di tengah, sedangkan pembaca layar memakainya untuk menyebut nama kolom setiap kali pembaca berpindah sel.

<table>
  <caption>Simpanan wajib anggota 2026</caption>
  <thead>
    <tr>
      <th scope="col">Bulan</th>
      <th scope="col">Nominal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>Rp25.000</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>Rp25.000</td>
    </tr>
  </tbody>
</table>

Atribut scope pada th menyatakan judul itu berlaku untuk satu kolom penuh dengan nilai col, atau untuk satu baris penuh dengan nilai row. Baris judul ditempatkan di dalam thead dan baris data di dalam tbody, sehingga bagian tabel tetap jelas walaupun barisnya panjang.

Elemen caption menjadi judul tabel yang ikut terbaca. Caption ditulis sebagai anak pertama table, sebelum thead, dan menggantikan kebiasaan menaruh judul di paragraf terpisah yang tidak punya hubungan apa pun dengan tabelnya.

Sebagian tabel punya judul di dua arah: baris teratas menyebut nama bulan, sementara sel pertama tiap baris menyebut nama anggota. Sel pertama itu ditulis dengan th ber-scope row, bukan td, supaya pembaca layar menyebutkan nama barisnya setiap kali pembacanya berpindah kolom. Tanpa itu pendengar hanya menerima deretan angka dan kehilangan keterangan angka siapa yang sedang dibacakan.

Latihan

0/3 lulus

Jawaban diperiksa di server. Lulus berarti kamu memahami contohnya, bukan penilaian seluruh pekerjaanmu.

Catatanmu

Memuat catatan…

tersimpan otomatis, ikut tercetak · 0/4.000

Luluskan semua latihan dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke

Tampilkan 4 lagi