Tabel lima baris masih gampang dikelola. Tabel lima puluh baris yang digulir di layar dan dicetak ke kertas mulai menuntut struktur: baris mana judul, baris mana data, baris mana ringkasan. HTML memungkinkan kita mengelompokkan baris ke dalam tiga peran itu dengan thead, tbody, dan tfoot.

Chapter ini membahas ketiga kelompok, manfaatnya, dan satu fakta sejarah tentang urutan penulisannya.

Tiga Grup Baris #

Aturannya: thead membungkus baris judul kolom — umumnya satu baris th; tbody membungkus baris data; tfoot membungkus baris ringkasan seperti total atau rata-rata. tbody boleh lebih dari satu dalam sebuah tabel — data dapat dipecah menjadi beberapa blok dengan struktur sama.

Manfaatnya nyata saat tabel tumbuh besar. Saat tabel panjang dicetak, browser dapat mengulang baris thead di tiap halaman kertas sehingga judul kolom tidak pernah tertinggal. CSS dapat menata tiap grup berbeda — misalnya memberi latar khusus pada tfoot — cukup dengan satu selector.

Contoh: Rekap Penjualan #

Tabel rekap penjualan kopi susu selama lima hari, lengkap dengan baris totalnya:

html 
<table>
  <caption>Penjualan kopi susu Kedai Kopi Siti, Senin sampai Jumat</caption>
  <thead>
    <tr>
      <th>Hari</th>
      <th>Gelas terjual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Senin</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Selasa</td>
      <td>31</td>
    </tr>
    <tr>
      <td>Rabu</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Kamis</td>
      <td>35</td>
    </tr>
    <tr>
      <td>Jumat</td>
      <td>42</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>160</td>
    </tr>
  </tfoot>
</table>

Hasil Render:

Mari kita telaah kode per blok:

  1. <caption>: judul tabel, tetap anak pertama table — posisinya sebelum semua grup.
  2. <thead>: satu baris judul kolom Hari dan Gelas terjual; browser dapat mengulang baris ini saat tabel dicetak berhalaman-halaman.
  3. <tbody>: lima baris data — blok terbesar tabel; nilainya ditulis apa adanya karena HTML tidak menghitung apa pun.
  4. <tfoot>: baris ringkasan; Total ditulis sebagai th karena baris ini punya judul sendiri, 160 sebagai td data.

Urutan Penulisan: Fakta Sejarah #

Fakta menarik dari sejarah: pada HTML 4, tfoot justru wajib ditulis sebelum tbody — browser masa itu dapat menggambar baris total lebih dulu selagi data masih diunduh baris demi baris. Standar HTML masa kini membalik modelnya: tfoot ditempatkan setelah tbody, dan itulah urutan yang kita tulis. Browser tetap menerima urutan warisan lama dan tetap menampilkan tfoot di bagian bawah tabel; mengikuti urutan konvensi membuat markup kita rapi dan sesuai standar.

Ringkasan #

  • thead = baris judul; tbody = baris data, boleh lebih dari satu; tfoot = baris ringkasan.
  • Saat mencetak, browser dapat mengulang thead di tiap halaman; CSS dapat menata tiap grup dengan satu selector.
  • Urutan penulisan konvensi: thead, tbody, tfoot — meskipun warisan HTML 4 memakai urutan lain.
  • Tulis tbody eksplisit meskipun browser bersedia menambahkannya sendiri.

Baris dan kolom bisa pula digabung melebar — mari masuk ke colspan dan rowspan.