Table Header dan Row

Tabel yang baik bukan hanya rapi saat diam — tabel log pesanan bisa memuat puluhan baris, dan pengguna terus menyeberangi data sambil mencari kolomnya. Di sinilah struktur tabel yang kita bangun sejak chapter Styling Table menjadi berguna: thead, tbody, dan tfoot bukan sekadar formalitas semantik, tetapi titik pemasangan styling paling berguna. Chapter ini memakainya untuk tiga fitur nyata: header yang menempel saat tabel menggulir, baris yang menyala saat disorot, dan latar per grup baris.

Grup Baris sebagai Hook Styling #

Ketiga grup baris memberi tiga sasaran selector yang berbeda makna:

.tabel-pesanan thead th {
  background-color: #f4fbf7;
  color: #14503a;
  text-align: left;
}

.tabel-pesanan tfoot td {
  font-weight: 700;
  border-top: 2px solid #1f6f54;
}

Demo berikut memasang kedua selector itu pada tabel lengkap:

th dan Atribut scope #

Sel th yang dibungkus thead menjadi header kolom; th juga bisa berdiri sebagai header baris bila dipakai sebagai sel pertama di tbody. Atribut scope menegaskan hubungannya bagi teknologi bantu:

<tr>
  <th scope="col">Harga</th>
  <th scope="col">Stok</th>
</tr>

Atribut ini tidak mengubah tampilan sedikit pun — tugasnya membantu pembaca layar mengaitkan sel data dengan headernya. Nilai col untuk header kolom dan row untuk header baris sudah mencakup kebutuhan tabel biasa. Kebiasaan kecil yang murah dan nilainya besar untuk aksesibilitas. Untuk tabel yang headernya menempel atau menggulir, scope menjadi makin penting: asosiasi yang hilang dari pandangan tetap tersampaikan secara struktural.

Resep Header Sticky dalam Panel Gulir #

Panel tabel dengan tinggi tetap membuat halaman tetap pendek, tetapi header ikut menggulir keluar pandangan. Solusinya position: sticky dari section Positioning, dipasang pada th di dalam panel:

.panel-tabel {
  max-height: 280px;
  overflow: auto;
}

.tabel-pesanan thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f4fbf7;
  box-shadow: 0 1px 0 #cbd5d1;
}

1. Panel dengan max-height dan overflow: auto menjadi scroll container — panggung tempat sticky bekerja.
2. position: sticky; top: 0 membuat header menempel di tepi atas panel selama baris data menggulir di bawahnya.
3. background-color wajib — tanpa latar, sel data terlihat menembus header saat lewat di bawahnya.
4. z-index: 1 menjaga header berada di atas sel-sel data tetangga.
5. box-shadow sebagai garis bawah — pada mode collapse, garis border milik header digambar pada lapisan tabel sehingga ikut menggulir; bayangan kotak menempel pada sel dan tetap terlihat.

Demo berikut memuat delapan baris pesanan dalam panel setinggi 240px — gulir isinya dan sorot barisnya:

Hover Baris dan Latar per Grup #

State hover membantu mata mengikuti satu baris melebar saat membacanya:

.tabel-pesanan tbody tr:hover {
  background-color: #f9fafb;
}

Pola kedua adalah latar per kelompok data — misalnya menandai baris pesanan yang masih diproses:

.tabel-pesanan tr.barang-diproses {
  background-color: #fdf3dd;
}

Pengelompokan lewat class seperti ini tetap cukup untuk kasus visual; bila kelompoknya berulang dan butuh penanda struktural, pertimbangkan memecah tabel per kategori alih-alih menumpuk pewarnaan.

Ringkasan #

Grup thead, tbody, dan tfoot memberi selector yang maknanya jelas untuk header, data, dan total; atribut scope melengkapi makna itu bagi pembaca layar. Resep header sticky memadukan panel overflow: auto dengan position: sticky plus latar dan z-index yang wajib, sementara hover dan latar kelompok menjaga baris mudah diikuti. Baris-baris yang menyorot kursor ini akan kita kembangkan satu pola lagi — pewarnaan bergantian yang melekat tanpa kursor — pada chapter Zebra Striping.