Tabel milik Siti kini tumbuh dari tiga baris jadwal menjadi laporan penjualan belasan baris. Pada skala itu, kita membutuhkan cara menyatakan baris mana yang berperan sebagai header, baris mana yang berisi data, dan baris mana yang memuat total. HTML menyediakan tiga elemen pengelompokan baris untuk keperluan tersebut: thead, tbody, dan tfoot. Chapter ini membahas peran ketiganya, urutan yang sah dalam markup, serta manfaat praktis yang menyertainya.

Tiga Kelompok Baris #

Elemen thead membungkus baris-baris header, tbody membungkus baris-baris data, dan tfoot membungkus baris penutup seperti baris total. Ketiganya mengubah makna struktur, bukan tampilan: tanpa CSS, tabel terlihat nyaris sama seperti sebelumnya. Nilai pengelompokan muncul pada tiga tempat, yaitu gaya yang menyasar kelompok, perilaku cetak dan gulir pada tabel panjang, serta konteks tambahan bagi teknologi bantu.

Urutan yang Sah dalam Markup #

Model konten table menetapkan urutan penulisan: caption bila ada, kemudian colgroup bila ada, lalu thead, kemudian satu atau lebih tbody, dan terakhir tfoot. Dengan urutan itu, dokumen baru kita tulis persis seperti susunan visualnya. Dua catatan penting menyertainya:

  • Lebih dari satu tbody sah menurut spesifikasi; laporan yang dipecah per wilayah atau per kategori memanfaatkan keleluasaan ini.
  • Sejarahnya pernah berbeda: HTML 4.01 mewajibkan tfoot ditulis sebelum tbody, dan sebagian kode lama masih memakai pola tersebut. Browser memang tetap merender bagian footer di bagian bawah tabel, tetapi checker modern menandai tbody yang ditulis setelah tfoot sebagai error, sehingga pada dokumen baru kita menuliskan tfoot paling akhir.

Manfaat Pengelompokan #

Pengelompokan baris melayani beberapa kebutuhan sekaligus:

  • Styling per grup: selector CSS dapat menyasar thead, tbody, atau tfoot secara terpisah tanpa menambah class.
  • Header yang menempel: pada tabel panjang yang digulir, thead menjadi dasar pembuatan header tetap melalui CSS; section HTML dan CSS membahas teknik tersebut.
  • Cetakan multipage: ketika tabel panjang dicetak, informasi header biasanya tetap tampil pada setiap halaman karena browser mengenali thead.
  • Konteks bagi teknologi bantu: grup yang jelas membantu pembaca layar dan mesin pencari memahami peran tiap baris.

Keempat manfaat tersebut berasal dari satu sumber yang sama, yaitu browser yang mengetahui peran setiap baris. Informasi itu hanya ada bila kita menuliskannya, dan contoh berikut menunjukkan polanya.

Contoh: Laporan Penjualan Lengkap #

Kedai Siti merangkum penjualan mingguan dalam satu tabel dengan dua kelompok data, yaitu minuman dan makanan ringan, serta satu baris total. Simpan file berikut sebagai laporan-penjualan.html:

html laporan-penjualan.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laporan Penjualan Kedai Siti</title>
</head>
<body>
  <h1>Laporan Penjualan Minggu Ini</h1>
  <table>
    <thead>
      <tr>
        <th>Produk</th>
        <th>Unit Terjual</th>
        <th>Pendapatan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Kopi susu gula aren</td>
        <td>120</td>
        <td>Rp2.400.000</td>
      </tr>
      <tr>
        <td>Teh tarik</td>
        <td>80</td>
        <td>Rp1.200.000</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Roti bakar</td>
        <td>60</td>
        <td>Rp1.080.000</td>
      </tr>
      <tr>
        <td>Pisang goreng</td>
        <td>90</td>
        <td>Rp810.000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total</td>
        <td>350</td>
        <td>Rp5.490.000</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Baris header Produk, Unit Terjual, Pendapatan di bagian atas
  - Empat baris data dalam dua kelompok tbody: minuman lalu makanan
  - Baris Total di bagian bawah tabel

Mari kita telaah struktur pengelompokannya:

  1. Baris 11-17 (thead): kelompok header berisi satu tr dengan tiga th.
  2. Baris 18-29 (tbody pertama): kelompok data minuman dengan dua baris.
  3. Baris 30-41 (tbody kedua): kelompok data makanan ringan; dua tbody dalam satu tabel tetap sah menurut spesifikasi.
  4. Baris 42-48 (tfoot): kelompok penutup berisi baris total, ditulis paling akhir sesuai urutan yang sah.

Struktur laporan ini rapi, tetapi kebutuhan berikutnya biasanya lebih visual: sel yang membentang beberapa kolom untuk pelajaran ganda, atau baris total yang menutupi seluruh lebar. Chapter berikutnya membahas colspan dan rowspan beserta perhitungan yang menjaga tabel tetap seimbang.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

laporan-penjualan.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laporan Penjualan Kedai Siti</title>
</head>
<body>
  <h1>Laporan Penjualan Minggu Ini</h1>
  <table>
    <thead>
      <tr>
        <th>Produk</th>
        <th>Unit Terjual</th>
        <th>Pendapatan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Kopi susu gula aren</td>
        <td>120</td>
        <td>Rp2.400.000</td>
      </tr>
      <tr>
        <td>Teh tarik</td>
        <td>80</td>
        <td>Rp1.200.000</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Roti bakar</td>
        <td>60</td>
        <td>Rp1.080.000</td>
      </tr>
      <tr>
        <td>Pisang goreng</td>
        <td>90</td>
        <td>Rp810.000</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total</td>
        <td>350</td>
        <td>Rp5.490.000</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>