Accessible Tables

Setelah lesson ini, kamu dapat menghubungkan sel judul dengan data menggunakan scope col dan row pada tabel sederhana.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Jika kamu mendengar “Minggu, Menyiangi”, kamu tahu tugas hari itu. Jika hanya mendengar “Menyiangi”, konteksnya hilang. Hubungan header membantu mempertahankan konteks saat menavigasi tabel.

Menghubungkan sel judul dengan data menggunakan scope col dan row pada tabel sederhana.

PAHAMI KONSEPNYA

Scope menjelaskan arah judul

Pada th, scope="col" menyatakan header untuk kolom di bawahnya; scope="row" menyatakan header untuk baris di sampingnya. Gunakan pada tabel sederhana dengan satu tingkat judul. Browser dan teknologi bantu dapat memakai hubungan ini saat membaca data.

Bukan semua sel menjadi header

Nama hari atau kategori dapat menjadi judul baris. Nilai seperti jumlah buku tetap td. Jangan memberi scope pada td karena atribut tersebut digunakan untuk sel header th. Caption tetap dibutuhkan untuk konteks tabel secara keseluruhan.

Sederhanakan sebelum memperumit

Tabel dengan banyak header bertingkat dan sel gabungan membutuhkan pertimbangan aksesibilitas tambahan. Untuk dasar, hindari rowspan dan colspan yang tidak perlu. Kadang membagi satu tabel besar menjadi beberapa tabel kecil lebih mudah dibaca.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<table>
  <caption>Contoh jumlah tanaman per area</caption>
  <thead><tr><th scope="col">Area</th><th scope="col">Jumlah</th></tr></thead>
  <tbody>
    <tr><th scope="row">Balkon</th><td>4</td></tr>
    <tr><th scope="row">Halaman</th><td>7</td></tr>
  </tbody>
</table>

HASIL DI BROWSER

Jumlah adalah judul kolom angka; Balkon dan Halaman adalah judul baris. Hubungan itu dinyatakan secara eksplisit.

KESALAHAN YANG SERING TERJADI

<td scope="row">Balkon</td>

Scope digunakan pada th. Jika Balkon menamai baris, ganti td menjadi th scope="row".

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Th “Jumlah” berada di baris pertama dan menamai angka-angka di bawahnya. Scope yang tepat?

rowcolTidak boleh memakai th

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

TULIS · LIHAT · PAHAMI

Lengkapi arah baca tabel

Perbaiki tabel jadwal rekaan: judul kolom memakai th scope="col", nama hari memakai th scope="row", dan tugas tetap td. Pertahankan caption, thead, serta tbody.

<table>
  <caption>Jadwal contoh klub baca</caption>
  <thead><tr><th>Hari</th><th>Kegiatan</th></tr></thead>
  <tbody>
    <tr><td>Sabtu</td><td>Membaca bersama</td></tr>
    <tr><td>Minggu</td><td>Berbagi catatan</td></tr>
  </tbody>
</table>

index.htmlHTMLLn 1, Col 18 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.

Scope col menamai kolom; scope row menamai baris.
Scope berada pada th.
Tabel sederhana dan caption yang jelas mengurangi kebingungan.

TabelAksesibilitas

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

Hubungkan dengan konsep lain

HTML table °Accessibility °

Library: Tiga bahasa di balik satu halaman ↗

Hadapi Chapter Trial →