Properti table-layout

Pada chapter sebelumnya tabel kita menentukan lebar kolomnya sendiri — dan selama kontennya normal, hasilnya memang bagus. Masalah muncul ketika satu sel memuat teks panjang: kolom lain menyempit terpaksa, dan tabel yang sama bisa tampak berbeda setiap kali datanya berubah. Property table-layout mengambil kendali itu: mode auto (default) menghitung lebar dari konten, mode fixed mengikuti rencana kita. Chapter ini membedah keduanya plus cara menetapkan lebar kolom lewat colgroup.

Mode auto: Lebar dari Konten #

Secara default, table-layout: auto bekerja dengan memindai seluruh isi tabel: browser mengukur setiap sel, mencari lebar minimal dan lebar ideal setiap kolom, lalu membagi ruang tersisa. Mekanisme ini adaptif — kolom tanggal tidak akan lebih lebar dari perlu, kolom nama memperoleh ruang sesuai isinya.

Harganya dua sisi. Pertama, hasilnya bergerak mengikuti data: satu nama produk panjang di baris kesekian cukup untuk merombak seluruh pembagian kolom. Kedua, browser harus memindai semua sel sebelum menggambar satu piksel pun — pada tabel ratusan baris, perhitungan ini menambah waktu render.

.tabel-laporan {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

Mode fixed: Lebar dari Rencana #

Nilai table-layout: fixed mengganti sumber kebenarannya: lebar kolom ditentukan oleh baris pertama tabel — atau oleh colgroup bila ada — dan baris-baris berikutnya cukup mengikuti:

.tabel-laporan.fixed {
  table-layout: fixed;
}

Aturan bagiannya tiga lapis: kolom yang diberi lebar eksplisit (di col atau sel baris pertama) memakai angka itu; sisa ruang dibagi rata ke kolom tanpa lebar; konten yang lebih panjang dari kolomnya tidak lagi mendorong lebar — teks pindah baris, atau terpotong bila kita tambahkan overflow: hidden pada sel. Syaratnya satu: tabel tetap perlu width eksplisit (misalnya width: 100%), karena mode fixed tanpa lebar tabel tidak punya ruang untuk dibagi.

Menetapkan Lebar Kolom dengan colgroup dan col #

Elemen colgroup dan col menaruh informasi kolom di satu tempat, sebelum baris mana pun:

<table class="tabel-laporan fixed">
  <colgroup>
    <col style="width: 40%">
    <col style="width: 35%">
    <col style="width: 25%">
  </colgroup>
  <tbody>
    <tr>
      <td>Roasting</td>
      <td>12 Februari 2026</td>
      <td>Batch #42</td>
    </tr>
  </tbody>
</table>

Setiap col mewakili satu kolom, dan atribut span membuat satu col mewakili beberapa kolom sekaligus — <col span="2" style="width: 60%"> mengatur dua kolom pertama bersama. Pada mode fixed, angka di col inilah yang dipakai browser. Property yang sampai ke kolom lewat col terbatas: lebar, latar, dan beberapa property border — selebihnya tetap styling di level sel.

Kedua tabel berikut memuat data yang sama persis — yang atas memakai auto, yang bawah fixed dengan colgroup — termasuk satu nama paket yang sangat panjang:

Kapan fixed Membantu #

Mode fixed paling bernilai dalam tiga situasi:

• Kolom-kolomnya sudah diketahui — dasbor dan laporan dengan struktur kolom tetap; desainer sudah tahu kolom mana yang layak lebar.
• Kontennya rawan panjang — URL, nama berkas, atau ID panjang yang di mode auto merombak layout; kombinasi fixed + overflow-wrap: anywhere pada sel menjaga kolom tetap berdisiplin.
• Tabelnya besar — menghemat pemindaian konten dan membuat render lebih cepat.

Sebaliknya, untuk tabel kecil dengan konten biasa, mode auto bebas repot dan hasilnya lazimnya sudah baik — tidak ada keharusan memakai fixed.

Ringkasan #

table-layout: auto menghitung lebar kolom dari konten sehingga hasilnya bergerak mengikuti data; table-layout: fixed mengunci lebar dari baris pertama atau colgroup, menghemat perhitungan, dan menjaga kolom tetap dapat diprediksi. colgroup dan col menjadi tempat terbaik menuliskan rencana lebar tersebut. Dengan lebar kolom beres, sisa pertanyaan besar tentang tabel adalah garisnya: bermacam mode separate dan collapse yang kita bedah pada chapter berikutnya.