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>:

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:

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:

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:

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):

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í:

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):

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:

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ů:

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.