Tabel Fiksi sudah menjadi pola. Pada bagian ini kita melengkapi dua tabel sisanya, menimbang keputusan terbesar proyek — tiga tabel terpisah atau satu tabel raksasa — lalu menutup isi katalog dengan aturan peminjaman yang disusun sebagai dl.

Tiga Tabel atau Satu Tabel Raksasa? #

Ada cara lain menyusun katalog yang sama: satu tabel tunggal dengan kolom tambahan “Kategori besar” berisi Fiksi, Nonfiksi, dan Referensi. Markupnya lebih ringkas — satu table, satu thead — tetapi tiga hal menurun kualitasnya saat katalog dibaca manusia.

Pertama, ukuran. Satu tabel berubah menjadi lima kolom kali sepuluh baris; di layar ponsel, kolom terdorong sempit. Tiga tabel kecil tetap empat kolom yang lega. Kedua, pemindaian. Pembaca yang mencari novel tidak perlu melewati baris kamus dan atlas; pemilahan per kategori sudah melakukan penyaringan pertamanya. Ketiga, navigasi fragment — tiga section memberi tiga sasaran lompatan, satu tabel hanya satu.

PertimbanganTiga tabel terpisahSatu tabel + kolom kategori besar
Lebar di layar sempitempat kolom, masih legalima kolom, terdorong sempit
Mencari satu kategorilompat ke tabelnyamemindai semua baris
Navigasi fragmenttiga sasaran lompatansatu sasaran
Menyaring lintas kategorimembaca tiga tabelsatu tabel, sekali pandang

Baris terakhir jujur memihak lawannya: begitu katalog perlu diurutkan atau disaring lintas kategori, satu tabel data plus skrip menjadi pilihan wajar. Karena Pustaka Cendekia dibaca manusia dengan kebutuhan per kategori, kita tetap memilih tiga tabel.

Tabel Nonfiksi dan Referensi #

Isi kedua section dengan pola yang sama — hanya data dan caption yang berbeda:

html
<section id="nonfiksi">
  <h2>Nonfiksi</h2>
  <table>
    <caption>Koleksi nonfiksi Pustaka Cendekia, diperbarui Oktober 2026</caption>
    <thead>
      <tr>
        <th scope="col">Judul</th><th scope="col">Penulis</th><th scope="col">Tahun</th><th scope="col">Kategori</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Sejarah Kecil Kota Pesisir</th><td>Hilda Marpaung</td><td><time datetime="2018">2018</time></td><td>Sejarah</td>
      </tr>
      <tr>
        <th scope="row">Berkebun di Lahan Sempit</th><td>Yoga Pratama</td><td><time datetime="2022">2022</time></td><td>Panduan</td>
      </tr>
      <tr>
        <th scope="row">Renungan dari Ruang Baca</th><td>Farid Maulana</td><td><time datetime="2024">2024</time></td><td>Esai</td>
      </tr>
    </tbody>
  </table>
</section>
<section id="referensi">
  <h2>Referensi</h2>
  <table>
    <caption>Koleksi referensi Pustaka Cendekia, hanya dibaca di tempat</caption>
    <thead>
      <tr>
        <th scope="col">Judul</th><th scope="col">Penulis</th><th scope="col">Tahun</th><th scope="col">Kategori</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Kamus Istilah Maritim</th><td>Nadia Kahfi</td><td><time datetime="2020">2020</time></td><td>Kamus</td>
      </tr>
      <tr>
        <th scope="row">Atlas Pesisir Nusantara</th><td>Bambang Sutrisno</td><td><time datetime="2017">2017</time></td><td>Atlas</td>
      </tr>
      <tr>
        <th scope="row">Ensiklopedia Tanaman Nusantara</th><td>Ratih Puspitasari</td><td><time datetime="2021">2021</time></td><td>Ensiklopedia</td>
      </tr>
    </tbody>
  </table>
</section>

Mari kita bedah perbedaan pentingnya:

  1. Pola identik: thead, scope, dan time persis seperti tabel Fiksi. Pembaca yang sudah memahami satu tabel memahami ketiganya — konsistensi adalah fitur, bukan kemalasan.
  2. Caption Referensi (baris 26): bukan sekadar judul — ia membawa aturan “hanya dibaca di tempat”, informasi yang tidak muat di kolom mana pun tetapi wajib diketahui sebelum meminjam. Caption deskriptif memikul tugas itu.
  3. Kolom Kategori memuat rincian di bawah kategori besar: Novel dan Puisi di dalam Fiksi, Sejarah dan Esai di dalam Nonfiksi, Kamus dan Atlas di dalam Referensi — bukan mengulang nama section-nya.

Aturan Peminjaman dengan dl #

Isi katalog lengkap; satu bagian tersisa. Setelah section Referensi, tambahkan section keempat:

html
<section id="cara-meminjam">
  <h2>Cara Meminjam</h2>
  <dl>
    <dt>Keanggotaan</dt>
    <dd>Cukup datang ke ruang baca dengan kartu identitas; relawan mencatat nama Anda pada buku anggota.</dd>
    <dt>Lama pinjam</dt>
    <dd>Dua pekan per buku, maksimal tiga judul sekaligus.</dd>
    <dt>Perpanjangan</dt>
    <dd>Boleh satu kali, cukup kabari relawan penjaga sebelum jatuh tempo.</dd>
    <dt>Buku referensi</dt>
    <dd>Tidak dipinjamkan — kamus, atlas, dan ensiklopedia hanya dibaca di ruang baca.</dd>
  </dl>
</section>

Mari kita bedah baris demi baris:

  1. section dan h2 (baris 1-2): aturan peminjaman adalah bagian katalog — tetapi isinya bukan tabel. Ujian dari chapter Kapan Menggunakan Tabel: tiap penjelasan hanya berelasi dengan aturannya sendiri — satu sumbu, bukan dua.
  2. dt aturan (baris 4, 6, 8, 10): nama aturan ditulis singkat — Keanggotaan, Lama pinjam — layaknya istilah pada glosarium.
  3. dd penjelasan (baris 5, 7, 9, 11): isi aturan dalam satu-dua kalimat; browser menjorokkannya di bawah dt-nya secara otomatis, tanpa satu baris CSS.
  4. dl pasangan istilah-nilai: pola yang sama dengan glosarium dan FAQ pada chapter Description List — aturan dan penjelasannya adalah pasangan, bukan butir tunggal ul.

Hasil pada Browser #

Halaman kini memuat tiga tabel berurutan dan daftar aturan di bawahnya. Klik “Referensi” pada navigasi — halaman melewati dua tabel pertama dan berhenti tepat di tabel ketiga. Penjelasan dd menjorok rapi di bawah tiap dt — murni bawaan browser.

Inilah keadaan halaman pada akhir Bagian 3 — isi katalog lengkap, tinggal footer yang menyusul pada Bagian 4; klik “Referensi” untuk melompat melewati dua tabel pertama:

Ringkasan Bagian 3 #

  • Tiga tabel terpisah menang untuk katalog yang dibaca manusia: kolom tetap lega, pemindaian per kategori, tiga sasaran fragment; satu tabel unggul saat data perlu disaring lintas kategori.
  • Tabel Nonfiksi dan Referensi memakai pola identik dengan Fiksi; caption Referensi sekaligus memuat aturan khusus kategori itu.
  • Aturan peminjaman disusun sebagai dl — pasangan aturan-penjelasan, bukan data dua dimensi.

Bagian terakhir menutup proyek: menimbang metadata, menambahkan footer, dan menguji hasil akhir.