Captions & Headings

Setelah lesson ini, kamu dapat memberi tabel caption serta mengelompokkan baris judul dan data dengan thead dan tbody.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Dua tabel berisi Hari dan Jam. Yang satu jadwal buka, yang lain jadwal relawan. Caption membantu pembaca mengetahui tabel mana yang sedang dibaca.

Memberi tabel caption serta mengelompokkan baris judul dan data dengan thead dan tbody.

PAHAMI KONSEPNYA

Caption menamai tabel

Caption adalah judul atau deskripsi singkat tabel, ditulis sebagai anak pertama table. Tulis konteks yang cukup, seperti “Jadwal contoh relawan kebun”, bukan sekadar “Tabel 1”. Ini membantu menghubungkan data dengan tujuannya.

Kelompok baris

Thead membungkus baris header. Tbody membungkus baris data utama. Keduanya berisi tr, lalu tr berisi th atau td. Tfoot dapat dipakai untuk baris ringkasan seperti total, tetapi tidak wajib untuk setiap tabel.

Kelompok bukan pengganti header sel

Memasukkan td ke thead tidak otomatis membuatnya th. Gunakan th untuk sel yang menamai kolom atau baris. Kelompok baris dan jenis sel adalah dua keputusan berbeda.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<table>
  <caption>Jadwal contoh relawan kebun</caption>
  <thead><tr><th scope="col">Hari</th><th scope="col">Tugas</th></tr></thead>
  <tbody>
    <tr><th scope="row">Sabtu</th><td>Menyiram</td></tr>
    <tr><th scope="row">Minggu</th><td>Menyiangi</td></tr>
  </tbody>
</table>

HASIL DI BROWSER

Caption memberi konteks; thead dan tbody menunjukkan kelompok baris. Sel judul tetap menggunakan th.

KESALAHAN YANG SERING TERJADI

<thead><td>Hari</td><td>Tugas</td></thead>

Thead membutuhkan tr sebagai pembungkus baris. Sel judul di dalam baris tersebut menggunakan th.

COBA BERSAMA

Praktik memperjelas pemahaman.

Lengkapi elemen yang menamai tabel.

<table>
  <>Koleksi bacaan contoh</caption>
</table>

Lihat petunjuk

Namanya berbeda dari figcaption milik figure.

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Beri konteks pada koleksi

Rapikan tabel ini: tambahkan caption yang menjelaskan data koleksi contoh, pindahkan baris judul ke thead, gunakan th, lalu bungkus dua baris data dengan tbody.

<table>
  <tr><td>Kategori</td><td>Jumlah</td></tr>
  <tr><td>Sains</td><td>12</td></tr>
  <tr><td>Cerita</td><td>18</td></tr>
</table>

index.htmlHTMLLn 1, Col 15 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Caption memberi konteks seluruh tabel.
Thead dan tbody mengelompokkan baris.
Th tetap diperlukan untuk menandai sel judul.

Tabel

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

HTML table °Semantic HTML °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →