S metrem a CSS na tabulky

16. října 2002

•

Úkol je prostý – zajistit v (X)HTML požadovanou a neměnnou velikost buněk v tabulce pomocí kaskádových stylů. Řešení také není nikterak složité. Ovšem cesta k řešení bude plná pokusů a omylů. Pokud si ovšem neprostudujete následující povídání.

Nastavení šířky a výšky buněk tabulky se samozřejmě provádí pomocí parametrů width a height:

td {width: 20ex;
height: 120px;}

Individuální nastavení jednotlivých buněk tabulky lze zařídit pomocí mechanismu identifikátorů jazyka (X)HTML, přičemž meze individualismu vytyčuje princip tabulkového zobrazení tím, že všechny buňky v jednom řádku budou stejně vysoké a analogicky všechny buňky v jednom sloupci stejně široké. Budeme-li tedy nastavovat různou šířku více buněk v jednom sloupci, prohlížeč si vybere tu největší hodnotu pro celý sloupec buněk. Potud se zdá být vše v pořádku, nicméně problémy na sebe nenechají dlouho čekat.

Co působí potíže?

Za jistých okolností může skoro každá tabulka vypadat dobře – za předpokladu, že uživatel má vhodný prohlížeč, očekávaná písma a zejména odpovídající velikost okna prohlížeče. Bohužel předpoklady jsou to nereálné, uživatelé jsou různí a odlišná velikost okna prohlížeče stejně jako odlišná písma mohou měnit velikosti buněk a celou tabulku tak deformovat. Pokud s tím ovšem jako tvůrci stránek něco neuděláme.

Začněme příkladem:

td {width: 1000px}

Zde požadujeme, aby každá buňka tabulky byla široká tisíc pixelů. Pokud bude mít tabulka alespoň dva sloupce, bude požadovaná šířka tabulky překračovat rozlišení monitoru většiny uživatelů. Tomu ovšem prohlížeče navzdory požadavku zabrání úměrným zmenšením šířek buněk, neboť se obecně předpokládá, že by tabulka měla být v prohlížeči zobrazena v celé šířce bez nutnosti použití vodorovného posuvníku. Pro jisté tvůrčí záměry autora webové stránky však takové úpravy mohou být nežádoucí, požaduje-li například fixní šířku textového bloku či pracuje-li v tabulce s obrázky na pozadí apod. Možností řešení nastíněného problému existuje více, takže si je proberme postupně.

Co na to druhá verze CSS?

Druhá verze specifikace kaskádových stylů definuje čtyři nové parametry pro nastavování dimenzí objektů, a to min-width a max-width pro vymezení minimální a maximální šířky a analogicky min-height a max-height pro vymezení minimální a maximální výšky. Pro nastavování jisté volnosti v šířkách sloupců a výškách řádků tabulky vypadají velmi slibně, bohužel však v současné době tyto parametry internetové prohlížeče nepodporují. Snad do budoucna.

Speciálně pro tabulky přichází druhá verze CSS ještě s jedním důležitým parametrem, který ovlivňuje algoritmus vykreslování tabulek v prohlížeči – table-layout. Výchozí hodnotou je auto, tedy výše zmiňovaný stav, kdy si prohlížeč rozměry buněk přepočítává tak, aby se celá tabulka co nejlépe vešla do okna. Použijeme-li druhou přípustnou hodnotu fixed, prohlížeči je toto přepočítávání zakázáno čímž se pomalu dostáváme tam, kam chceme:

table {table-layout: fixed;}
td {width: 260px;
height: 2ex;}

Tento příklad prohlížeči sděluje, že bez ohledu na velikost okna prohlížeče i obsah jednotlivých buněk tabulky mají být sloupce široké 260 pixelů a řádky vysoké jako dvě písmena x. Tento parametr v praxi funguje s tou výhradou, že šířky sloupců musí být definované v buňkách prvního řádku, nebo lépe prostřednictvím značek <colgroup> a <col>, jako například:

table {table-layout: fixed;}
#prvniDvaSloupce {width: 160px;}
#tretiSloupec {width: 60ex;}

A tedy:

Na řadě je šířka tabulky

Mozilla parametru table-layout rozumí také, ale pouze v případě, že je zároveň specifikována šířka celé tabulky:

table {table-layout: fixed;
width: 0px;}

Bude-li šířka nastavena menší (třeba právě na nulu, jak je uvedeno v příkladě), než kolik činí součet šířek jednotlivých sloupců, bude tabulka vykreslena fixně se zadanými šířkami sloupců. Bude-li šířka tabulky nastavena větší než zmiňovaný součet, bude tabulka vykreslena rovněž fixně, ovšem s šířkami sloupců úměrně zvětšenými tak, aby celková šířka tabulky odpovídala nastavení. Tohoto pravidla se dá vhodně využít kombinací absolutních a relativních měřítek:

table {table-layout: fixed;
width: 100%;}
#prvniSloupec {width: 100px;}
#druhySloupec {width: 500px;}
#tretiSloupec {width: 200px;}

Podle uvedeného příkladu bude šířka tabulky vždy minimálně 100+500+200 = 800 pixelů, bude-li však okno prohlížeče širší, tabulka se roztáhne přes celou šířku. Použijeme-li parametr width u tabulky s parametrem table-layout nastaveným na hodnotu auto (což odpovídá případu, kdy prohlížeč tomuto parametru nerozumí), pak výsledná šířka tabulky bude vždy odpovídat právě této hodnotě. Jsou-li tedy uvedeny šířky jednotlivých sloupců, budou poměrově přepočítány tak, aby v součtu korespondovaly s požadovanou šířkou tabulky:

table {width: 400px;}
#prvniSloupec {width: 100px;}
#druhySloupec {width: 500px;}
#tretiSloupec {width: 200px;}

Podle tohoto příkladu tedy ve výsledku budou sloupce široké 50 px, 250 px a 100 px, a to ještě za předpokladu, že si obsah některé z buněk nevynutí zvětšení na úkor ostatních sloupců. Bude-li pro naše účely dostačovat pevná šířka tabulky, je tento způsob uspokojivý, chceme-li však míti plnou kontrolu nad šířkami sloupců a přitom musíme zapomenout na parametr table-layout, lze si ještě vypomoci trikem popsaným dále.

Staré zlaté triky

Výchozí algoritmus vykreslování tabulek v prohlížeči se snaží zobrazit celý obsah buněk při co nejmenší výšce tabulky. Obsahuje-li tedy nějaká buňka dlouhý nezalamovaný text, bude sloupec s touto buňkou iniciovat roztáhnutí tabulky přes celou šířku okna prohlížeče. Při zužování okna prohlížeče bude nejmenší šířka sloupce odpovídat největšímu nedělitelnému objektu, v případě textu nejdelšímu slovu. Co z toho vyplývá?

Maximální šířku sloupce nastavíme pomocí parametru width, přičemž zejména pro Internet Explorer je důležité, aby tato šířka byla definována pro buňku s nejdelším obsahem – bude-li nastavena pouze pro buňku ze stejného sloupce, ale některého z předchozích řádků, prohlížeč ji nebude brát v potaz. Zřejmě nejlepší je nastavovat šířku sloupce skrze značky t definované v buňkách prvního řádku, nebo lépe prostřednictvím značek <colgroup> a <col>.

Výška řádků se přizpůsobí obsahu buněk tak, aby nic nebylo skryto. Pomocí parametru height je možné přikázat výšku větší, definování menší výšky však budou prohlížeče ignorovat.

Minimální šířka sloupců bude odpovídat nejširšímu objektu, potažmo slovu v daném sloupci, nuže zde může tvůrce stránky kalkulovat s obsahem tabulky, co se týče například nedělitelných nadpisů či obrázků. Podstatné je, že do nestlačitelného obsahu buněk se započítává i vycpávka, téměř univerzálním trikem tedy může být vpašování prázdného řádku do tabulky s definovanou vycpávkou:

#prvniSloupec {width: 100px;}
#druhySloupec {width: 500px;}
#prvniRadek {visibility: hidden;}
#prvniBunka {padding-left: 100px;}
#druhaBunka {padding-left: 500px;}

kde popis tabulky bude následující:

Nebylo by však dobré dávat definici šířky do stejných buněk, ve kterých definujeme vycpávku, tedy něco jako:

#prvniBunka {padding-left: 100px;
width: 100px;}

V současných prohlížečích prostě taková definice nepřináší předpokládané výsledky.
Na příklady dimenzování tabulek se podívejte na tuto stránku.

Pro přesnější určování šířek sloupců a výšek řádků v tabulkách nabízí druhá verze kaskádových stylů pět nových parametrů, z nichž je ovšem v novějších prohlížečích podporován pouze table-layout. Bez tohoto parametru lze pevnou šířku tabulky nastavit parametrem width u značky <table>, tímto způsobem však například nezohledníme sloupec, jehož šířka se má měnit v závislosti na velikosti písma – lepšího výsledku lze dosáhnout pomocí triku s vycpávkou v prázdném řádku. Pro uživatele, který má v prohlížeči nastavenou jinou velikost písma (například kvůli zhoršenému zraku), určitě potěší, pokud budou šířky sloupců zadávány relativně pomocí jednotek em či ex.

Doporučuji šířku sloupců zadávat skrze parametr <colgroup>, u kterého lze pomocí atributu span zadat, na kolik sloupců se má vztahovat, případně může reprezentanty těchto sloupců obsahovat jako značku <col>:

Vnořené značky <col> použijeme zejména v případě, že chceme pro sousední sloupce definovat stejnou šířku, ale jiné zarovnání a naopak.