Dispunerea tabelelor - CSS-Tricks

De table-layoutdefinește proprietatea ce algoritm browser - ul ar trebui să folosească pentru a așeza rânduri de masă, celule și coloane.

table ( table-layout: fixed; )

Așa cum se explică în specificația CSS2.1, aspectul tabelului în general este de obicei o chestiune de gust și va varia în funcție de alegerile de proiectare. Cu toate acestea, browserele vor aplica automat anumite constrângeri care vor defini modul în care sunt așezate tabelele. Acest lucru se întâmplă atunci când table-layoutproprietatea este setată la auto(valoarea implicită). Dar aceste constrângeri pot fi ridicate atunci când table-layouteste setat la fixed.

Valori

auto: implicit. Algoritmul automat al browserului este utilizat pentru a defini modul în care sunt așezate rândurile, celulele și coloanele unui tabel. Aspectul tabelului rezultat depinde, în general, de conținutul tabelului.
fixed: Cu această valoare, aspectul tabelului ignoră conținutul și, în schimb, folosește lățimea tabelului, orice lățime specificată a coloanelor și valorile de spațiu la margini și celule. Valorile coloanelor utilizate se bazează pe lățimile definite pe coloane sau celule pentru primul rând al tabelului.
inherit: indică faptul că valoarea este moștenită de la table-layoutvaloarea părintei sale

Pentru ca o valoare de fixedsă aibă vreun efect, lățimea tabelului trebuie setată la altceva decât auto(valoarea implicită pentru widthproprietate). În demonstrațiile de mai jos, toate lățimile tabelului sunt setate la 100%, ceea ce presupune că vrem ca masa să-și umple orizontal containerul părinte.

Cel mai bun mod de a vedea efectele unui algoritm de dispunere a tabelelor fixe este folosirea unei demonstrații.

Consultați Demo-ul stiloului pentru proprietatea CSS de dispunere a tabelelor de către Louis Lazaris (@impressivewebs) pe CodePen.

Când vizualizați prima dată demonstrația de mai sus, veți observa că aspectul coloanelor tabelului este dezechilibrat și incomod. În acel moment, tabelul folosește algoritmul implicit al browserului pentru a defini modul de așezare a tabelului, ceea ce înseamnă că conținutul va dicta aspectul. Demo exagerează acest fapt prin includerea unui șir lung de text în interiorul unei celule de tabel, în timp ce toate celelalte celule de tabel folosesc doar două cuvinte fiecare. După cum puteți vedea, browserul extinde prima coloană pentru a găzdui conținutul mai mare.

Dacă faceți clic pe butonul „Comutați aspectul tabelului: fix”, veți vedea cum arată aspectul tabelului atunci când este utilizat algoritmul „fix”. Când table-layout: fixedse aplică, conținutul nu mai dictează aspectul, dar în schimb, browserul folosește orice lățimi definite din primul rând al tabelului pentru a defini lățimile coloanelor. Dacă nu există lățimi pe primul rând, lățimile coloanelor sunt împărțite în mod egal pe tabel, indiferent de conținutul din celule.

Alte exemple pot ajuta la clarificarea acestui lucru. În următoarea demonstrație, tabelul are un element al cărui prim element are o lățime de 400px. Observați în acest caz că schimbarea table-layout: fixednu are niciun efect.

Consultați Demo-ul stiloului pentru proprietatea CSS de dispunere a tabelelor de către Louis Lazaris (@impressivewebs) pe CodePen.

Acest lucru se întâmplă deoarece algoritmul de aspect implicit spune în esență „faceți prima coloană cu lățimea de 400 px și distribuiți coloanele rămase în funcție de conținutul lor”. Deoarece celelalte trei coloane au același conținut unul ca celălalt, nu va exista nicio modificare. Dar acum să adăugăm un conținut de text suplimentar la una dintre celelalte coloane:

Vedeți Demo-ul stiloului pentru proprietatea de dispunere a tabelelor CSS cu lățimea col și conținut variabil de către Louis Lazaris (@impressivewebs) pe CodePen.

Acum, dacă faceți clic pe butonul de comutare, veți vedea coloanele ajustate pentru a se potrivi cu un aspect fix, indiferent de conținut. Încă o dată, se întâmplă același lucru; prima coloană este setată la 400 px, apoi coloanele rămase sunt împărțite în mod egal. Dar de data aceasta, deoarece una dintre coloane are un conținut suplimentar, diferența este vizibilă.

Cum determină un algoritm de aspect fix lățimile coloanei

Următoarele două demonstrații ar trebui să ajute la înțelegerea faptului că primul rând al tabelului este ceea ce ajută la definirea lățimilor coloanei unui tabel setat la table-layout: fixed.

Vedeți Demo-ul stiloului pentru aspectul tabelului CSS cu celula din rândul 1 dată cu lățimea definită de Louis Lazaris (@impressivewebs) pe CodePen.

În demo-ul de mai sus, prima celulă din primul rând al tabelului are o lățime de 350 px. Comutarea table-layout: fixedreglează celelalte coloane, dar prima rămâne aceeași. Acum încercați următoarea demonstrație:

Vedeți Demo-ul stiloului pentru aspectul tabelului CSS cu celula din rândul 2 dată de lățimea definită de Louis Lazaris (@impressivewebs) pe CodePen.

În acest caz, este al doilea rând care are o lățime atașată la prima sa celulă de masă. Acum, când se face clic pe butonul de comutare, toate lățimile coloanei sunt ajustate. Din nou, acest lucru se datorează faptului că algoritmul de aspect fix utilizează primul rând pentru a determina lățimile coloanei, iar rezultatul final este că distribuie lățimile în mod egal.

Avantajele unui algoritm de aspect fix

Beneficiile estetice ale utilizării table-layout: fixedar trebui să fie clare din demonstrațiile de mai sus. Dar celălalt beneficiu major este performanța. Specificația se referă la algoritmul fix ca un algoritm „rapid” și din motive întemeiate. Browserul nu trebuie să analizeze conținutul întregului tabel înainte de a determina dimensiunea coloanelor; trebuie doar să analizeze primul rând. Deci, rezultatul este o procesare mai rapidă a aspectului tabelului.