Распоред столова - ЦСС-трикови

Тхе table-layoutдефинише имовину који алгоритам бровсер треба да користи да постави од табеле редова, ћелије, и колоне.

table ( table-layout: fixed; )

Као што је објашњено у спецификацији ЦСС2.1, распоред столова уопште је ствар укуса и варираће у зависности од избора дизајна. Прегледачи ће, међутим, аутоматски применити одређена ограничења која ће дефинисати начин постављања табела. То се дешава када је table-layoutсвојство постављено на auto(подразумевано). Али ова ограничења се могу уклонити када table-layoutсе постави на fixed.

Вредности

auto: подразумевано. Аутоматски алгоритам прегледача користи се за дефинисање распореда редова, ћелија и колона табеле. Добијени распоред табеле генерално зависи од садржаја табеле.
fixed: Уз ову вредност, распоред табеле игнорише садржај и уместо тога користи ширину табеле, било коју наведену ширину колона и вредности размака и размака између ћелија. Вредности колона се користе на основу ширина дефинисаних на колонама или ћелијама за први ред табеле.
inherit: означава да је вредност наследјена од table-layoutвредности свог родитеља

Да би вредност fixedимала ефекта, ширина табеле мора бити подешена на нешто друго auto(подразумевано за widthсвојство). У демонстрацијама испод, све ширине табеле су постављене на 100%, што претпоставља да желимо да табела хоризонтално попуни свој надређени контејнер.

Најбољи начин да се виде ефекти алгоритма фиксног распореда табела је коришћење демонстрације.

Погледајте Демонстрацију оловке за својство изгледа табеле ЦСС-а, аутора Лоуис Лазарис (@импрессивевебс) на ЦодеПен-у.

Када први пут погледате горњу демонстрацију, приметићете да је распоред ступаца табеле неуравнотежен и незгодан. У том тренутку табела користи задати алгоритам прегледача да дефинише начин постављања табеле, што значи да ће садржај диктирати изглед. Демонстрација преувеличава ову чињеницу укључивањем дугачког низа текста унутар једне ћелије табеле, док све остале ћелије табеле користе само две речи. Као што видите, прегледач проширује прву колону да прими већи део садржаја.

Ако кликнете на дугме „Пребаци распоред табеле: фиксно“, видећете како изгледа изглед табеле када се користи „фиксни“ алгоритам. Када table-layout: fixedсе примени, садржај више не диктира изглед, већ претраживач користи било коју дефинисану ширину из првог реда табеле за дефинисање ширине колона. Ако у првом реду нису присутне ширине, ширине ступаца подељене су подједнако по табели, без обзира на садржај унутар ћелија.

Даљи примери могу вам помоћи да ово буде јасније. У следећој демонстрацији табела има елемент чији први елемент има ширину 400px. У овом случају приметите да пребацивање table-layout: fixedнема ефекта.

То се дешава јер задати алгоритам распореда у основи каже „направите прву колону ширином од 400 пиксела и дистрибуирајте преостале колоне на основу њиховог садржаја“. Будући да остале три колоне имају једнак садржај, међусобне промене неће бити. Али сада додамо неки додатни текстуални садржај у једну од осталих колона:

Погледајте Демонстрацију оловке за ЦСС својство распореда табела са ширином колова и променљивим садржајем Лоуиса Лазариса (@импрессивевебс) на ЦодеПен-у.

Ако кликнете на дугме за пребацивање, видећете да се колоне прилагођавају фиксном распореду, без обзира на садржај. Још једном се дешава иста ствар; прва колона је постављена на 400 пиксела, а затим су преостале колоне подељене подједнако. Али овог пута, јер једна од колона има додатни садржај, разлика је приметна.

Како алгоритам фиксног распореда одређује ширине колона

Следеће две демонстрације требале би да помогну у разумевању да је први ред табеле оно што помаже у дефинисању ширине колона табеле постављене на table-layout: fixed.

Погледајте Демонстрацију оловке за изглед табеле ЦСС-а са ћелијом у реду 1 којој је задао ширину Лоуис Лазарис (@импрессивевебс) на ЦодеПен-у.

У горњој демонстрацији, прва ћелија у првом реду табеле има ширину од 350 пиксела. Пребацивањем се table-layout: fixedподешавају остале колоне, али прва остаје иста. Сада пробајте следећу демонстрацију:

Погледајте Демонстрацију оловке за распоред табела ЦСС-а са ћелијом у реду 2 којој је задао ширину Лоуис Лазарис (@импрессивевебс) на ЦодеПен-у.

У овом случају, то је други ред који има ширину прикачену за своју прву ћелију табеле. Сада када се кликне дугме за пребацивање, прилагођавају се све ширине колона. Опет, то је зато што алгоритам фиксног распореда користи први ред за одређивање ширине колоне, а крајњи резултат је да ширину дистрибуира једнако.

Предности алгоритма фиксног распореда

Естетске користи употребе table-layout: fixedтреба да буду јасне из горњих демонстрација. Али друга главна предност су перформансе. Спецификација се односи на фиксни алгоритам као „брзи“ алгоритам, и то са добрим разлогом. Прегледач не треба да анализира целокупан садржај табеле пре одређивања величине колона; потребно је само да анализира први ред. Резултат је бржа обрада изгледа табеле.