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.