Tabel Katalog Buku

Kerangka sudah berdiri, kini kita mengisi section pertama. Tabel Fiksi sekaligus menjadi pola bagi dua tabel berikutnya. Seluruh kebiasaan dari Section Tables dipakai di sini — caption sebagai konteks, thead dan tbody sebagai pengelompok baris, th dengan scope sebagai penanda relasi judul-sel.

Tabel Fiksi #

Ganti komentar di dalam section Fiksi dengan tabel berikut:

<section id="fiksi">
  <h2>Fiksi</h2>
  <table>
    <caption>Koleksi fiksi 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">Laut di Ujung Kampung</th><td>Raras Asih</td><td><time datetime="2021">2021</time></td><td>Novel</td>
      </tr>
      <tr>
        <th scope="row">Rumah Kaca di Kota Baru</th><td>Bagus Wirawan</td><td><time datetime="2019">2019</time></td><td>Novel</td>
      </tr>
      <tr>
        <th scope="row">Surat dari Sendai</th><td>Maya Kusnadi</td><td><time datetime="2023">2023</time></td><td>Cerpen</td>
      </tr>
      <tr>
        <th scope="row">Nyanyian Musim Hujan</th><td>Anton Gunadi</td><td><time datetime="2020">2020</time></td><td>Puisi</td>
      </tr>
    </tbody>
  </table>
</section>

Hasil Render:

Mari kita bedah tabel ini sel demi sel:

1. section dan h2 (baris 1-2): wadah kategori tetap section — tabel diletakkan di dalamnya, bukan menggantikannya. Heading section menjadi judul bagian; caption menjadi judul tabel.
2. caption anak pertama table (baris 4): judul yang melekat secara semantik — pembaca layar mendengarnya sebelum sel pertama. Redaksinya deskriptif: siapa pemilik koleksi dan kapan diperbarui, bukan sekadar “Tabel Fiksi”.
3. thead membungkus baris judul (baris 5-9): satu baris th untuk empat kolom. Browser dapat mengulang baris ini di tiap halaman saat tabel panjang dicetak.
4. th scope="col" (baris 7): tiap judul kolom diberi arah relasi eksplisit — “Penulis” menaungi sel-sel di bawahnya pada kolom yang sama.
5. tbody eksplisit (baris 10): wadah empat baris data. Browser sebenarnya bersedia menambahkan tbody sendiri pada tr yang ditulis polos — kita tetap menuliskannya agar struktur terbaca di markup.
6. th scope="row" pada kolom pertama (baris 12, 15, 18, 21): judul buku menjadi judul baris — sel “Raras Asih” dinyatakan milik baris “Laut di Ujung Kampung”. Tabel katalog adalah tabel dua arah: judul kolom di atas, judul baris di kiri, dan scope menghapus keraguan arah relasinya.
7. td sel data (baris 12 dst.): penulis, tahun, dan kategori menempati sel data biasa di samping judul barisnya.

Perhatikan juga yang tidak ada: tfoot. Katalog tidak punya baris ringkasan — tidak ada jumlah total atau rata-rata yang bermakna — maka bagian itu cukup dilewati.

Tahun Terbit: Angka Biasa atau time? #

Kolom Tahun menyimpan satu angka empat digit per baris. Menuliskannya sebagai teks biasa sah — <td>2021</td> tidak melanggar apa pun. Namun HTML menyediakan jalur yang lebih baik: elemen time dengan atribut datetime berformat tahun YYYY — format tahun-saja memang sah menurut standar.

Kita memilih time. Alasannya khas katalog: tahun terbit adalah data yang kerap dipakai — mesin pencari dapat menampilkannya pada hasil pencarian, dan skrip katalog dapat mengurutkan atau menyaring koleksi menurut tahun. Teks yang tampil tetap “2021” persis seperti teks biasa; nilainya yang terbaca mesin tersimpan di datetime. Seluruh tabel pada proyek ini memakai pola yang sama.

Hasil pada Browser #

Tabel Fiksi tampil dengan caption di atas, empat judul kolom dalam huruf tebal dan rata tengah dari thead, serta empat baris data rata kiri. Kolom terbentuk otomatis dari sel yang berjajar lurus — browser menghitung lebar tiap kolom dari isi terpanjangnya, sehingga kolom Judul lebih lebar daripada kolom Tahun tanpa satu baris CSS pun. Judul buku di kolom pertama ikut tampil tebal karena memakai th — penanda peran yang sekaligus terlihat.

Inilah keadaan halaman pada akhir Bagian 2 — tabel pertama terisi, dua section kategori sisanya masih kosong; klik “Fiksi” pada navigasi untuk melompat ke tabelnya:

Ringkasan Bagian 2 #

• Tabel katalog memakai struktur lengkap: caption anak pertama, thead dengan th scope="col", tbody eksplisit, dan th scope="row" pada kolom Judul.
• caption ditulis deskriptif — pemilik koleksi dan waktu pembaruan — bukan judul pendek.
• Tahun terbit ditandai time dengan datetime="YYYY": tampilan tetap angka biasa, nilainya terbaca mesin.

Bagian berikutnya melengkapi dua tabel sisanya dan menimbang keputusan pengelompokan data keseluruhan katalog.