Styling Table

Tabel adalah elemen HTML dengan struktur paling teratur: baris, kolom, header, dan baris total semuanya punya tempat baku. Justru karena teratur itulah tampilan default-nya terasa sempit — sel berdempetan tanpa padding layak, garis tipis menumpuk, dan header tidak menonjol. Chapter ini memulai bagian tabel dari fondasinya: anatomi elemen tabel, mengapa default-nya seperti itu, dan resep dasar yang mengubah data mentah menjadi tabel yang nyaman dibaca.

Anatomi Tabel HTML #

Satu tabel lengkap tersusun dari enam elemen yang masing-masing punya peran:

html
<table class="tabel-harga">
  <thead>
    <tr>
      <th>Produk</th>
      <th>Harga</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kopi Gayo</td>
      <td>Rp28.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>Rp28.000</td>
    </tr>
  </tfoot>
</table>

Elemen	Peran
`table`	wadah keseluruhan tabel
`thead`	grup baris header — judul kolom
`tbody`	grup baris data
`tfoot`	grup baris penutup — total atau rangkuman
`tr`	satu baris
`th` / `td`	sel header / sel data

Struktur ini bukan formalitas: grup thead, tbody, dan tfoot menjadi titik pemasangan CSS sekaligus penanda semantik untuk pembaca layar. Chapter Table Header dan Row akan memakainya lebih jauh; untuk sekarang, biasakan menulis tabel lengkap dengan ketiga grupnya.

Tampilan Default Browser #

Aspek	Nilai default	Dampaknya
Mode border	`border-collapse: separate`	setiap sel punya bingkai sendiri dengan jarak kecil
Padding sel	sekitar 1px	teks menempel pada tepi sel
Sel `th`	teks tebal, rata tengah	berbeda gaya dari data di bawahnya
Lebar tabel	mengikuti konten	tabel sempit di halaman lebar

Tidak ada yang perlu dilawan — cukup kita setel ulang dengan resep berikut.

Resep Dasar Styling Tabel #

Empat kelompok deklarasi menaikkan kualitas tabel data secara drastis:

css
.tabel-harga {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabel-harga th,
.tabel-harga td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.tabel-harga th {
  background-color: #f4fbf7;
  color: #14503a;
}

width: 100% membuat tabel mengisi lebar wadahnya, bukan mengikuti konten.
border-collapse: collapse menyatukan garis antarsel sehingga tidak bertumpuk ganda — dibedah penuh pada chapter Border Collapse.
padding: 10px 14px memberi ruang longgar pada setiap sel — satu perubahan yang paling besar efeknya.
border-bottom pada sel, bukan border penuh menggambar garis pemisah baris saja — tabel data modern jarang memakai garis vertikal.
th berlatar dan berwarna sendiri membuat header menonjol dari baris data.

Demo berikut menerapkan seluruh resep chapter ini pada tabel harga produk:

Perhatikan juga colspan="2" yang menyatukan dua sel pada baris total.

Perataan Kolom Angka #

Kolom yang berisi angka atau harga paling mudah dibandingkan bila rata kanan:

css
.tabel-harga .kolom-harga {
  text-align: right;
}

Tambahkan class kolom-harga pada th dan td kolom yang dimaksud — demo berikut menyandingkan kolom harga tanpa dan dengan perataan kanan:

Keputusan Lebar dan Border #

Dua keputusan styling tabel sengaja kita tunda karena layak dibedah sendiri:

Distribusi lebar kolom — browser menentukannya dari konten (table-layout: auto) atau dari rencana kita (table-layout: fixed); topik chapter berikutnya.
Bentuk garis antarsel — separate dengan jarak, atau collapse yang menyatukan garis; topik chapter Border Collapse.

Untuk saat ini, resep di atas — lebar penuh, padding sel, garis baris, header menonjol — sudah mencakup 80 persen kebutuhan tabel data.

Ringkasan #

Tabel tersusun dari table, grup thead/tbody/tfoot, baris tr, dan sel th/td; tampilan default-nya sempit karena padding sel nyaris nol dan lebar tabel mengikuti konten. Resep dasarnya: lebar penuh, padding sel yang lega, garis pemisah baris saja, dan header yang diberi latar. Dua keputusan besar — distribusi lebar kolom dan mode garis — kita bedah berurutan, dimulai dari table-layout pada chapter berikutnya.