tabelcolgroupkolomMenengah3 mnt baca

colgroup dan col

Mengatur gaya per kolom dengan colgroup, col, dan span: contoh tabel keuangan tanpa class di tiap sel.

Masalahnya: Styling Kolom Satu per Satu Itu Melelahkan

Bayangkan tabel laporan keuangan dengan 6 kolom dan 50 baris. Kamu ingin semua angka rata kanan dan kolom "Total" punya latar abu-abu. Cara naif: menambahkan class="angka" ke 300 sel satu per satu. Cara cerdas: menargetkan kolomnya langsung dengan <colgroup> dan <col>.

Elemen ini menjawab pertanyaan yang jarang ditanyakan: "bagaimana cara memberi gaya ke satu kolom utuh tanpa menyentuh tiap sel?" Jawabannya ada di HTML, bukan cuma di CSS.

colgroup dan col: Struktur Dasar

<colgroup> adalah pembungkus yang ditaruh tepat setelah <caption> (kalau ada) dan sebelum <thead>. Di dalamnya ada elemen <col> kosong (tanpa konten, tanpa tag penutup) yang mewakili tiap kolom.

html

<table border="1">
  <caption>Pengeluaran mingguan</caption>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <tr>
    <th scope="col">Kategori</th>
    <th scope="col">Senin</th>
    <th scope="col">Selasa</th>
  </tr>
  <tr>
    <th scope="row">Makan</th>
    <td>Rp25.000</td>
    <td>Rp30.000</td>
  </tr>
</table>

Tiga <col> untuk tiga kolom, urut dari kiri ke kanan. Sendiri, <col> tidak mengubah apa-apa secara visual. Kekuatannya muncul saat kamu memberi atribut atau menargetkannya dari CSS lewat class.

Atribut span: Menulis Lebih Sedikit

Kalau beberapa kolom berurutan butuh perlakuan sama, tidak perlu menulis <col> berkali-kali. Pakai span:

html

<colgroup>
  <col />
  <col span="5" />
  <col />
</colgroup>

Satu <col span="5"> mewakili lima kolom sekaligus: kolom 2 sampai 6. Total kolom yang diwakili harus cocok dengan jumlah kolom aktual di tabel. Kalau tidak cocok, browser kebingungan memetakan gaya dan hasilnya tidak konsisten.

Contoh Nyata: Tabel Keuangan

Ini pola paling umum di dunia nyata: kolom teks rata kiri, kolom angka rata kanan, kolom total dibedakan dengan latar. Tanpa colgroup, kamu butuh class di setiap <td>. Dengan colgroup, cukup tiga baris:

html

<table border="1">
  <caption>Arus kas warung, minggu pertama Oktober 2026</caption>
  <colgroup>
    <col class="kolom-teks" />
    <col span="3" class="kolom-angka" />
    <col class="kolom-total" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Keterangan</th>
      <th scope="col">Pemasukan</th>
      <th scope="col">Pengeluaran</th>
      <th scope="col">Selisih</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Senin</th>
      <td>350.000</td>
      <td>120.000</td>
      <td>230.000</td>
      <td>230.000</td>
    </tr>
    <tr>
      <th scope="row">Selasa</th>
      <td>410.000</td>
      <td>150.000</td>
      <td>260.000</td>
      <td>490.000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Rata-rata</th>
      <td>380.000</td>
      <td>135.000</td>
      <td>245.000</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

Lalu di CSS: .kolom-total { background: #f3f4f6; } memberi latar ke seluruh kolom Total, dan perataan angka dilakukan lewat selector sel seperti td:nth-child(n+2) { text-align: right; }. Perhatikan <colgroup> bekerja berdampingan dengan thead/tbody/tfoot: colgroup mengatur kolom (vertikal), thead dan tbody mengatur baris (horizontal). Keduanya tidak saling menggantikan.

Kesalahan Umum: Salah vs Benar

html

<!-- SALAH: col tidak boleh berisi teks atau elemen -->
<colgroup>
  <col>Total</col>
</colgroup>

<!-- SALAH: colgroup ditaruh setelah thead -->
<table>
  <thead>...</thead>
  <colgroup>
    <col />
  </colgroup>
</table>

<!-- BENAR: col kosong, colgroup tepat setelah caption -->
<table>
  <caption>Judul</caption>
  <colgroup>
    <col span="2" />
    <col />
  </colgroup>
  <thead>...</thead>
</table>

Kesalahan klasik lain: nilai span yang tidak cocok dengan jumlah kolom tabel. Kalau tabelmu 5 kolom tapi colgroup hanya mewakili 4, kolom kelima tidak dapat gaya dan kamu akan bingung sendiri mencari penyebabnya. Selalu hitung ulang setiap menambah kolom.

Catatan teknis: Tidak semua properti CSS berlaku di <col>. Yang dijamin bekerja hanya properti level kolom: border, background, width, dan visibility. Properti seperti color, font-size, atau text-align pada <col> tidak konsisten antar browser, jadi untuk hal-hal itu targetkan selnya langsung (misalnya td:nth-child()).

Rangkuman

<colgroup> + <col> + span memungkinkanmu mengatur gaya per kolom dari satu tempat. Untuk tabel angka seperti laporan keuangan, ini menghemat ratusan class dan membuat tabel jauh lebih mudah dirawat ketika kolom bertambah.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tabel Nilai per Kolom

Buat tabel nilai 3 kolom (Nama, Tugas, Ujian) dengan colgroup: satu col untuk kolom Nama, satu col dengan class untuk kolom angka, dan beri class berbeda untuk kolom Ujian. Kemampuan menata kolom dari satu tempat menghemat banyak waktu saat tabel membesar.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Nilai</title>
</head>
<body>
  <table border="1">
    <!-- colgroup di sini -->
    <tr>
      <th scope="col">Nama</th>
      <th scope="col">Tugas</th>
      <th scope="col">Ujian</th>
    </tr>
    <tr>
      <th scope="row">Andi</th>
      <td>85</td>
      <td>90</td>
    </tr>
  </table>
</body>
</html>

Open Sandbox