Tutorial CSS / Menata Tabel CSS: Border, Ukuran, dan table-layout

Tata letak tabel CSS mendistribusikan ruang kolom sesuai dengan aturan ukuran tabel dan kontennya. table-layout: auto mempertimbangkan konten sel, sementara tata letak tetap dapat membuat ukuran kolom lebih dapat diprediksi ketika tabel memiliki lebar eksplisit.

Pisahkan lebar tabel dan padding sel

table { width: 100%; border-collapse: collapse; }

th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

width: 100% memberi tahu tabel untuk menyesuaikan ukurannya berdasarkan lebar induknya. Ruang di dalam sel diatur sebagai padding, dan border diatur sebagai border. border-collapse: collapse adalah metode menampilkan border dari sel yang berdekatan dengan menggabungkannya. Menetapkan lebar tabel dan menetapkan pemecahan baris dalam konten adalah hal yang terpisah.

Tabel dengan width: 100% tidak selalu sesuai dengan induknya. Konten yang tidak bisa dibungkus atau lebar minimum yang besar dapat membuat tabel atau konten sel sebenarnya lebih lebar. Dalam tabel data biasa, aman untuk membiarkan tinggi sel bertambah sesuai panjang kalimat. Jika Anda memberi tinggi tetap, Anda perlu memeriksa pemotongan ketika memperbesar teks atau menambahkan konten.

Alokasikan kolom sesuai dengan kontennya

<colgroup>
  <col style="width: 30%;">
  <col style="width: 70%;">
</colgroup>

Latihan ini memisahkan nama item pendek dan deskripsi panjang menjadi dua kolom. Saya memilih rasio 30:70 karena saya membutuhkan lebih banyak ruang untuk deskripsi. Jika data aktual terdiri dari tanggal, harga, deskripsi panjang, dll., bagilah sesuai dengan peran masing-masing kolom. Jika penempatan otomatis default cukup terbaca, tidak perlu memaksakan rasio.

Saat menentukan persentase dari seluruh kolom, seperti yang ditunjukkan di sini, atur jumlahnya menjadi 100%. Jangan menganggap deklarasi lebar colgroup sebagai hasil akhir yang ditegakkan dalam keadaan apapun. Tata letak otomatis bekerja bersama dengan ukuran minimum konten dan perhitungan tabel. Silakan lihat deskripsi colgroup di MDN.

Bandingkan tata letak otomatis dan tetap

Tata letak tabel tetap memerlukan lebar tabel yang ditentukan; width: auto tidak menghasilkan perhitungan tetap yang diinginkan. Di sini kedua tabel menggunakan width: 100% dan grup kolom yang sama, yang berbeda hanya pada table-layout. Jika sebuah sel memotong teks, periksa kondisi pembungkusan dan elipsisnya secara terpisah. Lihat MDN: tata letak tabel, Overflow CSS, Pembungkusan Teks Panjang, dan Elipsis.

Data di bawah ini berisi kode reservasi panjang yang ingin kita tampilkan tanpa pemecahan baris. Contoh lengkap menerapkan nowrap·hidden·ellipsis pada sel ini identik pada kedua tabel. Tata letak otomatis dapat diperluas untuk mencerminkan ruang nilai panjang, dan tata letak tetap dapat dipersingkat dalam kolom yang diberikan. Teks asli disediakan secara utuh dalam paragraf terpisah, sehingga Anda juga dapat memeriksa kode yang dipangkas.

Gulir area tabel di layar sempit

.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 32rem; }

Jika ukuran font root Anda adalah 16px, maka 32rem adalah 512px. Jika lebar yang tersedia di layar kurang dari itu, tabel akan mempertahankan lebar minimumnya dan hanya area induk yang akan menggulir secara horizontal. Hal ini harus dibedakan dari menggulir seluruh halaman secara horizontal. 32rem dalam latihan ini hanya untuk tujuan perbandingan antara kedua kolom ini dan tidak dimaksudkan sebagai lebar minimum untuk semua tabel. Periksa apakah tabel terpotong dan tetap dapat digunakan pada layar kecil sesuai dengan item Memeriksa CSS Responsif dengan Lebar, Zoom, dan Keyboard.

Jika tabel Anda kecil dan masih dapat dibaca, Anda dapat menurunkan atau menghapus lebar minimum. Sebaliknya, mengompres beberapa kolom dan nilai panjang dapat membuatnya sulit dibaca. Tentukan dari data aktual apakah kolom semantik dapat dipersingkat, diselesaikan dengan pemisah baris, atau pergerakan horizontal diperlukan. Di ponsel, instruksi seperti “Anda dapat bergerak secara horizontal” bisa membantu.

Pembungkus yang dapat digulir memiliki tabindex="0", role="region", nama aksesibel yang deskriptif, dan garis fokus yang terlihat. Tab ke dalamnya dan gunakan tombol panah untuk mencapai kolom terakhir. Tabel yang tidak memerlukan pengguliran tidak otomatis memerlukan titik tab ekstra. Lihat MDN: overflow.

Jalankan perbandingan tabel lengkap

Simpan dan buka kode di bawah ini sebagai UTF-8 di tables.html. Ini menggunakan tiga baris yang sama dan rasio kolom 30:70 yang sama, sehingga Anda dapat membandingkan perbedaan antara tata letak. Kode reservasi adalah data fiktif untuk latihan tata letak.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Table sizes and long content</title>
  <style>
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }
    .table-scroll:focus-visible { outline: 3px solid #9b5d00; outline-offset: 3px; }
    table { width: 100%; min-width: 32rem; border-collapse: collapse; }
    th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
    .auto { table-layout: auto; }
    .fixed { table-layout: fixed; }
    .token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .original { max-width: 640px; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Automatic and fixed table layout</h1>
  <h2>table-layout: auto</h2>
  <div class="table-scroll" role="region" aria-label="Auto Batch Comparison Table" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <h2>table-layout: fixed</h2>
  <div class="table-scroll" role="region" aria-label="Fixed batch comparison table" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <p class="original">Full reservation code: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>

1. Persempit jendela dan periksa lebar kedua tabel. Tabel tetap setidaknya 512px dengan root 16px, dan tabel otomatis bisa lebih lebar dari itu untuk mencerminkan kode yang lebih panjang. Kedua tabel harus bergerak secara horizontal di area tempat mereka membungkus, bukan melintang di seluruh halaman.
2. Pindah ke area tabel tetap dengan Tab dan periksa kolom terakhir dengan tombol panah kanan. Pada layar kecil, juga periksa apakah Anda bisa bergerak horizontal dengan jari. Setelah selesai memeriksa, gulir kembali ke posisi paling kiri.
3. Ubah table-layout pada aturan .fixed menjadi auto. Setelah memeriksa bagaimana perubahan lebar kolom dan tabel pada data yang sama, kembalikan nilainya ke fixed.
4. Ubah white-space di .token menjadi normal dan tambahkan overflow-wrap: anywhere. Periksa apakah kode panjang membungkus sehingga meningkatkan tinggi sel, kemudian kembalikan ke deklarasi asli.
5. Ubah rasio kolom menjadi 40:60. Bandingkan jarak pada kolom entri pendek dengan pemisah baris pada kolom deskripsi. Kembalikan ke 30:70 asli dan periksa pada layar lebar dan teks yang diperbesar.

Jika proporsinya tidak terlihat seperti yang diharapkan, periksa tata letak tabel dan lebar tabel yang ditentukan, lebar minimum, serta kondisi pembungkusan untuk string panjang. Jika pergerakan horizontal tidak berfungsi, pastikan Anda menentukan overflow-x pada elemen pembungkus tabel dan bukan pada tabel itu sendiri. Jika Anda memilih untuk mempersingkat kata-kata, Anda harus dapat membaca teks asli yang penting di tempat lain.