Tata letak tabel - Trik CSS | CSS Almanak 2024

The table-layoutmendefinisikan properti apa algoritma browser harus menggunakan untuk lay out baris tabel, sel, dan kolom.

table ( table-layout: fixed; )

Seperti yang dijelaskan dalam spesifikasi CSS2.1, tata letak tabel secara umum biasanya tergantung selera dan akan bervariasi tergantung pada pilihan desain. Browser akan, bagaimanapun, secara otomatis menerapkan batasan tertentu yang akan menentukan bagaimana tabel ditata. Ini terjadi ketika table-layoutproperti disetel ke auto(default). Namun kendala ini dapat dihilangkan jika table-layoutdisetel ke fixed.

Nilai

auto: default. Algoritme otomatis browser digunakan untuk menentukan bagaimana baris, sel, dan kolom tabel ditata. Tata letak tabel yang dihasilkan umumnya bergantung pada konten tabel.
fixed: Dengan nilai ini, tata letak tabel mengabaikan konten dan sebagai gantinya menggunakan lebar tabel, lebar kolom apa pun yang ditentukan, serta nilai batas dan spasi sel. Nilai kolom yang digunakan didasarkan pada lebar yang ditentukan pada kolom atau sel untuk baris pertama tabel.
inherit: menunjukkan bahwa nilai diwarisi dari table-layoutnilai induknya

Agar nilai fixedmemiliki efek, lebar tabel harus disetel ke selain auto(default untuk widthproperti). Dalam demo di bawah ini, semua lebar tabel disetel ke 100%, yang mengasumsikan kita ingin tabel mengisi wadah induknya secara horizontal.

Cara terbaik untuk melihat efek dari algoritma tata letak tabel tetap menggunakan demo.

Lihat Pen Demo untuk properti tata letak tabel CSS oleh Louis Lazaris (@impressivewebs) di CodePen.

Saat Anda pertama kali melihat demo di atas, Anda akan melihat tata letak kolom tabel tidak seimbang dan canggung. Pada saat itu, tabel menggunakan algoritme default browser untuk menentukan cara menyusun tabel, yang berarti konten akan menentukan tata letak. Demo membesar-besarkan fakta ini dengan menyertakan string teks yang panjang di dalam satu sel tabel, sementara semua sel tabel lainnya masing-masing hanya menggunakan dua kata. Seperti yang Anda lihat, browser memperluas kolom pertama untuk mengakomodasi konten yang lebih besar.

Jika Anda mengklik tombol "Toggle table-layout: fixed", Anda akan melihat seperti apa tata letak tabel saat algoritme "tetap" digunakan. Saat table-layout: fixedditerapkan, konten tidak lagi menentukan tata letak, tetapi browser menggunakan lebar yang ditentukan dari baris pertama tabel untuk menentukan lebar kolom. Jika tidak ada lebar di baris pertama, lebar kolom dibagi rata di seluruh tabel, terlepas dari konten di dalam sel.

Contoh lebih lanjut dapat membantu membuat ini lebih jelas. Dalam demo berikut, tabel memiliki elemen yang elemen pertamanya memiliki lebar 400px. Perhatikan dalam kasus ini, toggling table-layout: fixedtidak berpengaruh.

Lihat Pen Demo untuk properti tata letak tabel CSS oleh Louis Lazaris (@impressivewebs) di CodePen.

Ini terjadi karena algoritme tata letak default pada dasarnya mengatakan "buat lebar kolom pertama 400px, dan distribusikan kolom yang tersisa berdasarkan isinya". Karena tiga kolom lainnya memiliki konten yang sama satu sama lain, tidak akan ada perubahan. Tapi sekarang mari tambahkan beberapa konten teks tambahan ke salah satu kolom lainnya:

Lihat Pen Demo untuk properti tata letak tabel CSS dengan lebar kolom dan konten variabel oleh Louis Lazaris (@impressivewebs) di CodePen.

Sekarang jika Anda mengklik tombol sakelar, Anda akan melihat kolom menyesuaikan untuk mengakomodasi tata letak tetap, terlepas dari kontennya. Sekali lagi, hal yang sama terjadi; kolom pertama disetel pada 400px kemudian kolom yang tersisa dibagi rata. Tetapi kali ini, karena salah satu kolom memiliki konten tambahan, perbedaannya terlihat.

Bagaimana algoritme tata letak tetap menentukan lebar kolom

Dua demo berikut akan membantu dalam memahami bahwa baris pertama dari tabel adalah yang membantu menentukan lebar kolom dari tabel table-layout: fixed.

Lihat Pen Demo untuk tata letak tabel CSS dengan sel di baris 1 diberikan lebar yang ditentukan oleh Louis Lazaris (@impressivewebs) di CodePen.

Pada demo di atas, sel pertama pada baris pertama tabel memiliki lebar 350px. Toggling table-layout: fixedmenyesuaikan kolom lainnya, tetapi yang pertama tetap sama. Sekarang coba demo berikut:

Lihat Demo Pena untuk tata letak tabel CSS dengan sel di baris 2 yang diberikan lebar yang ditentukan oleh Louis Lazaris (@impressivewebs) di CodePen.

Dalam kasus ini, itu adalah baris kedua yang memiliki lebar yang dilampirkan ke sel tabel pertamanya. Sekarang ketika tombol sakelar diklik, semua lebar kolom disesuaikan. Sekali lagi, ini karena algoritma tata letak tetap menggunakan baris pertama untuk menentukan lebar kolom, dan hasil akhirnya adalah ia mendistribusikan lebar secara merata.

Manfaat dari algoritma tata letak tetap

Manfaat estetika penggunaan table-layout: fixedharus jelas dari demonstrasi di atas. Tetapi manfaat utama lainnya adalah kinerja. Spesifikasi mengacu pada algoritma tetap sebagai algoritma "cepat", dan untuk alasan yang bagus. Browser tidak perlu menganalisis seluruh konten tabel sebelum menentukan ukuran kolom; itu hanya perlu menganalisis baris pertama. Hasilnya adalah pemrosesan tata letak tabel yang lebih cepat.