Rámování tabulek – co na to CSS?

7. října 2002

•

Obdobně jako v jiných případech, také u tabulek v (X)HTML nabízí kaskádové styly alternativní metody úpravy jejich vzhledu. Pravdou je, že pro docílení stejného výsledku, jaký se dostaví přímočarou definicí některého z atributů značky „table“, je občas nutné zkombinovat více stylových parametrů, výsledkem však jsou větší možnosti kontroly nad vzhledem tabulky. Nyní si podrobně rozebereme orámování tabulek.

Bez kaskádových stylů lze orámování celé tabulky a částečně i jejich buněk ovlivňovat hned třemi atributy značky <table>:

border – nastavuje šířku okraje
frame – ovlivňuje zobrazení rámečku kolem celé tabulky
rules – definuje zobrazení oddělovačů mezi buňkami tabulky

Ještě připomeňme, že při nastavení šířky okraje na nulu se žádné orámování nezobrazí a že velikost mezery mezi jednotlivými buňkami se dá nastavit pomocí atributu cellspacing. A nyní si použití těchto atributů zakažme a začněme hledat náhradu mezi kaskádovými styly.

Rámečky na sto způsobů

Není překvapující, že pro orámování tabulky se, stejně jako pro nastavení okrajů ostatních objektů v HTML, využije parametr border. Jestliže však nastavení atributu border na nenulovou hodnotu způsobilo orámování celé tabulky a zároveň i jednotlivých buněk, při definování ekvivalentního parametru pomocí stylů je logicky nutné definovat zvlášť orámování tabulky a zvlášť orámování buněk:

table {border: solid 1px black}
td {border: solid 1px black}

Tato definice zařídí zobrazení tenkého rámečku kolem každé buňky a kolem celé tabulky, přičemž mezi mezi těmito rámečky bude, alespoň v Internet Exploreru a Mozille, mezera velikosti 2 pixely. S tímto přístupem samozřejmě není problém ovlivnit šířku, barvu i styl kteréhokoliv okraje buňky či tabulky, čehož bez stylů dosáhnout nelze:

table {border-top: solid 2px blue;
border-bottom: double 3px black}
td {border-top: solid 1px silver}
td#important {border: dashed 1px red}

Příklad vykreslí na horní straně tabulky širší modrý pruh, dole dvě černé čáry a nad všemi buňkami tenkou stříbrnou čáru, s výjimkou té buňky, která bude mít identifikátor v příkladě pojmenovaný important – ta bude mít červené čárkované orámování.

Kam se ztratilo vystouplé rámování?

Pokud chceme pomocí stylů dosáhnout plastického vzhledu rámečku, který prohlížeče standardně vykreslují, pokud je orámování specifikováno atributy u značky <table> (tedy takového orámování, kdy jsou horní a levý okraj světlejší či tmavší než dolní a pravý okraj), lze využít stylů čáry inset a outset:

table {border: outset 2px black}
td {border: inset 1px black}

Tento příklad zařídí v Mozille stejné orámování, jako kdybychom použili <table border="2">. Internet Explorer bohužel hodnoty inset a outset neumí interpretovat, zde pomůže jedině explicitní specifikace barev (dlužno podotknout, že různé prohlížeče používají odlišné odstíny barev):

table {border: solid 2px;
border-color: #fff #888 #888 #fff}
td {border: solid 1px;
border-color: #888 #fff #fff #888}

Ovlivňujeme mezeru mezi buňkami

A nyní k praktičtějšímu problému – co s mezerou mezi buňkami, jejíž velikost se dá upravovat pomocí atributu cellspacing? Při separátním modelu okrajů buněk (který je pro prohlížeče výchozí při interpretaci tabulek), definuje standard CSS2 parametr border-spacing, který má na starosti přesně totéž, co zmíněný atribut. Dokonce je povoleno uvést až dvě hodnoty, pro mezery vertikální a horizontální:

table {border: solid 2px black;
border-spacing: 3px 0px}

Háček tkví opět v tom, že Internet Explorer tomuto parametru nerozumí a je pro něj nutné mezeru určit pomocí atributu. Anebo, v případě že je požadována nulová mezera, změnit model okrajů buněk na takzvaně zhroucený (collapse):

table {border-collapse: collapse}
td {border: solid 1px black}

Zhroucení spočívá v tom, že sousední okraje buněk, respektive okraje buněk a rámeček kolem celé tabulky, splynou v jedinou čáru (parametr border-spacing se v tomto modelu ignoruje). Ve výsledku pak takové orámování tabulky vypadá jako jednoduchá mříž (viz stránku s příklady), přičemž není nutné definovat ve stylech okraj kolem celé tabulky. Pokud rámeček kolem celé tabulky přesto budeme definovat, pak jej bude Internet Explorer akceptovat vždy, zatímco Mozilla pouze v případě, že tento rámeček bude širší něž okraje u jednotlivých buněk. Podle definice následujícího příkladu Internet Explorer zobrazí kolem tabulky červený čárkovaný rámeček, zatímco Mozilla nikoliv:

table {border-collapse: collapse;
border: dashed 2px red}
td {border: solid 2px black}

Zhroucený model samozřejmě lze využít nejenom k odlišnému orámování tabulek. Velmi často je potřeba zobrazit obsahy sousedních buněk těsně vedle sebe (například obrázky), čehož lze snadno dosáhnout právě zhroucením bez zobrazení rámečků:

table {border-collapse: collapse}
td {width: 120px;
height: 100px}
td#td01 {background-image: url(obr1.jpg)}
td#td02 {background-image: url(obr2.jpg)}

K parametru border-collapse, který ovlivňuje model okrajů buněk, dodejme, že jej definuje specifikace CSS2 a rozumí mu jak Mozilla, tak IE od verze 5.0.

A ono by to šlo…

Druhá verze specifikace kaskádových stylů definuje speciálně pro tabulky ještě další tři parametry, které si zde pro úplnost uveďme, přestože v praxi nejsou nepostradatelné a prohlížeče jim zrovna dvakrát nerozumí. V souvislosti s probíraným rámováním je zajímavý především parametr empty-cells, který přípustnými hodnotami show a hide prohlížeči sděluje, zda i prázdné buňky (zapsané v HTML třeba jako <td />) mohou mít v separátním modelu okraje.

Parametr caption-side určuje umístění popisku k tabulce, povolené hodnoty jsou top, bottom, left a right. Konečně parametr table-layout upřesňuje, jaký algoritmus mají prohlížeče uplatnit při kalkulování rozměrů tabulky, povolené hodnoty jsou auto a fixed.

Závěrem si shrňme to nejpodstatnější z rámování tabulek. Rozlišujeme dva modely okrajů buněk v tabulce, separátní a zhroucený. V obou případech lze barvu, tloušťku a styl orámování ovládat skrze parametr border kaskádových stylů. Při separátním modelu se počítá s určitým prostorem mezi buňkami, jehož šířku lze pomocí CSS zadat parametrem border-spacing (pro Internet Explorer je zatím nutné použít atribut cellspacing). Při zhrouceném modelu okraje sousedních buněk splynou v jedinou čáru a parametry border-spacing a empty-cells se neberou v potaz.