HTML caption: Judul Tabel dan Posisi di Atas atau Bawah

HTML <caption> memberikan judul atau deskripsi singkat dari seluruh tabel. Letakkan sebagai elemen anak pertama di dalam table, dan gunakan CSS caption-side untuk mengontrol apakah muncul di atas atau di bawah tabel.

Bedakan judul tabel dari header kolom dan baris

Sebuah caption menjelaskan tentang tabel tersebut; th mengidentifikasi kolom atau baris tertentu. Mengganti keterangan dengan sebuah td di baris pertama mengubah hubungan antara judul tabel dan sel datanya. Gunakan subjek dan lingkup khusus daripada hanya "Tabel 1" sehingga pembaca dapat mengidentifikasi tujuan saat melihat atau menavigasi dengan teknologi bantu.

Gunakan hanya satu caption per table. Tambahkan interpretasi panjang, peringatan, atau sumber data pada teks di sekitarnya daripada membagi judul tabel di antara beberapa elemen caption.

Contoh lengkap: periksa posisi keterangan

Simpan kode sebagai table-caption.html dan buka di browser. Angka-angka tersebut adalah data latihan yang digunakan untuk menjelaskan struktur tabel.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Posisi judul tabel</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    .jb-table-scroll { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
    caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Data latihan</h1>
  <div class="jb-table-scroll">
    <table class="jb-table-01">
      <caption>Jumlah dokumen contoh per kategori dalam perpustakaan latihan</caption>
      <thead>
        <tr><th scope="col">Kategori</th><th scope="col">Dokumen</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">HTML</th><td>3</td></tr>
        <tr><th scope="row">CSS</th><td>2</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Keterangan Jumlah dokumen contoh per kategori dalam perpustakaan latihan muncul di atas tabel, diikuti oleh kolom Kategori dan Dokumen serta dua baris data. caption menjelaskan tujuan tabel, sementara elemen th dengan scope mengidentifikasi header kolom dan barisnya.

Ubah CSS caption-side: top menjadi caption-side: bottom dan muat ulang halaman. Judul berpindah ke bawah tabel namun tetap menjadi elemen anak pertama di HTML. Ubah kembali ke top untuk mengembalikan posisi semula. Gunakan text-align untuk penyelarasan horizontal daripada atribut align yang sudah usang.

Tulis keterangan tabel yang berguna

caption adalah judul yang terlihat dan membantu memberikan nama yang dapat diakses untuk tabel. Perilaku pembaca layar sebenarnya tergantung pada browser, teknologi bantu, dan atribut aksesibilitas lainnya. Menambahkan keterangan saja tidak menyelesaikan semua masalah aksesibilitas pada tabel yang kompleks: periksa juga hubungan antara header dan sel data serta urutan bacanya.

Warna latar table tidak otomatis diterapkan pada caption; atur latarnya secara terpisah bila diperlukan. Jika tabel merupakan satu-satunya isi elemen figure, gunakan figcaption untuk memberi keterangan pada figure, bukan mengulang judul yang sama dalam caption dan figcaption. referensi caption di MDN menyediakan aturan dan contoh.