Styling Tables

Tabel HTML tanpa CSS tampil seperti laporan polos: garis ganda, spasi sempit, dan kolom yang sulit dilacak matanya saat berpindah baris. Karena tabel data memuat informasi dua dimensi, styling tabel bukan sekadar kosmetik — garis pemisah, warna baris berselang-seling, dan header yang tetap terlihat semuanya membantu pembaca memasangkan nilai dengan kolomnya. Pada Chapter ini kita menata sebuah tabel pesanan mulai dari fondasi semantiknya, lalu menambahkan border-collapse, zebra rows, dan header sticky.

Struktur Semantik sebagai Fondasi #

Styling tabel paling efektif bila HTML-nya benar: <table> dibagi menjadi <thead> dan <tbody>, judul kolom memakai <th scope="col">, dan konteks tabel dinyatakan lewat <caption> yang ditulis sebagai anak pertama <table>. Dengan struktur ini selector kita sederhana — thead th, tbody td — tanpa class tambahan pada setiap sel. Elemen <caption> juga dibaca oleh screen reader sebagai nama tabel, sehingga keputusan semantik ini sekaligus keputusan aksesibilitas.

border-collapse dan Garis Sel #

Properti border-collapse menentukan apakah garis batas sel bersebelahan digabung menjadi satu garis (collapse) atau tetap terpisah dengan jarak (separate, nilai bawaan). Mode collapse adalah pilihan umum untuk tabel data karena menghasilkan garis tunggal yang bersih; mode separate menyediakan properti border-spacing untuk mengatur jarak antarsel, berguna pada tampilan bergaya kartu. Dengan collapse, konflik border antarsel diselesaikan browser mengikuti aturan prioritas border yang lebih tebal dan lebih “menonjol” menang.

Zebra Rows dengan nth-child #

Pola zebra memberi latar berbeda pada baris ganjil dan genap agar baris tetap terlacak ketika mata berpindah kolom:

.tabel-pesanan {
  border-collapse: collapse;
  width: 100%;
}

.tabel-pesanan th,
.tabel-pesanan td {
  padding: 10px 12px;
  text-align: left;
}

.tabel-pesanan tbody td {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.tabel-pesanan tbody tr:nth-child(odd) {
  background-color: rgb(241, 245, 249);
}

.tabel-gulir {
  max-height: 240px;
  overflow: auto;
}

.tabel-gulir thead th {
  position: sticky;
  top: 0;
  background-color: rgb(255, 255, 255);
}

Mari kita telaah aturan-aturan tersebut:

1. Baris 1–4 (.tabel-pesanan): border-collapse: collapse menggabungkan garis sel; width: 100% membuat tabel mengisi pembungkusnya (demo membatasinya dengan max-width).
2. Baris 6–10 (th, td): setiap sel diberi padding 10px 12px — celah bawaan tabel jauh lebih sempit daripada ini — dan teks diratakan kiri agar angka dan nama terbaca urut.
3. Baris 12–14 (tbody td): garis bawah tipis pada setiap sel isi menjadi pemisah baris yang halus; karena collapse, garis antarkolom tidak digambar ganda.
4. Baris 16–18 (nth-child(odd)): pseudo-class nth-child memilih baris ganjil di dalam tbody dan memberi latar abu-abu muda — baris pertama, ketiga, dan seterusnya ikut berwarna.
5. Baris 20–22 (.tabel-gulir): pembungkus tabel diberi tinggi maksimum dan overflow: auto, sehingga tabel dapat digulir sendiri tanpa memanjangkan halaman.
6. Baris 24–28 (thead th sticky): header diberi position: sticky; top: 0 sehingga tetap menempel di atas pembungkus saat digulir — pola yang dibedah lebih dalam pada Chapter Sticky Positioning . Latar putih wajib ada, sebab tanpanya baris data akan terlihat menembus header.

Hasil di Browser:

Tabel tampil dengan border-collapse "collapse"; sel diberi
padding atas 10px; baris tbody pertama berlatar rgb(241, 245, 249)
(pola zebra ganjil); header thead bersifat "sticky" di dalam
pembungkus gulir setinggi 240px.

Keempat nilai diprobe otomatis pada demo: border-collapse tabel, background-color baris pertama, position header, dan padding-top sel.

Kapan Zebra Diganti Border #

Zebra rows bukan satu-satunya cara membimbing mata. Alternatif yang lazim: garis horizontal pada setiap td (dipakai demo ini), zebra tanpa garis, atau hover pada baris sebagai bantuan tambahan — ingat bahwa :hover tidak tersedia bagi pengguna keyboard, sehingga bantuan utama sebaiknya tetap zebra atau garis. Kombinasi yang paling nyaman dibaca untuk tabel lebar: zebra tipis + garis bawah pada baris + header sticky dengan bayangan tipis.

.tabel-pesanan {
  border-collapse: collapse;
  width: 100%;
}

.tabel-pesanan th,
.tabel-pesanan td {
  padding: 10px 12px;
  text-align: left;
}

.tabel-pesanan tbody td {
  border-bottom: 1px solid rgb(226, 232, 240);
}

.tabel-pesanan tbody tr:nth-child(odd) {
  background-color: rgb(241, 245, 249);
}

.tabel-gulir {
  max-height: 240px;
  overflow: auto;
}

.tabel-gulir thead th {
  position: sticky;
  top: 0;
  background-color: rgb(255, 255, 255);
}