1 Výchozím modelem okrajů buněk v tabulce je separátní model, při kterém
je nutné pohlídat si zvlášť rámování jednotlivých buněk a zvlášť celé
tabulky. Rámování pro jednotlivé řádky nelze aplikovat.
|
Jednoduchý příklad orámování, kdy pro značky table a td
definujeme
{border: solid 1px black}
Buňka A1
|
Buňka A2
|
Buňka B1
|
Buňka B2
|
|
Příklad z textu, ve kterém jsou jemně naznačeny možnosti
nastevení parametru border:
Buňka A1
|
Buňka A2
|
Buňka B1
|
Buňka B2
|
|
2 Dojem plastického orámování buněk tabulky lze pomocí CSS zařídit
styly čáry inset a outset (v IE nefunguje) nebo
explicitním zadaním barev okrajů.
|
Tabulka se styly orámování inset a outset a s
upravenými mezerami mezi buňkami pomocí parametru border-spacing
(zde jako obrázek):
|
Tabulka s explicitním zadáním barevných hodnot pro okraje buněk a tabulky:
Buňka A1
|
Buňka A2
|
Buňka B1
|
Buňka B2
|
|
3 Při zhrouceném modelu okrajů buněk tabulky splynou sousední okraje
v jeden celek. Pokud jsou okraje zobrazeny, vypadá orámování tabulky
jako mřížka, pokud ne, mohou obsahy sousedních buněk ležet těsně vedle
sebe. Zhroucený model používá i hlavní tabulka na této stránce s příklady.
|
Typický mřížkovitý vzhled tabulky se zhrouceným modelem okrajů buněk.
Tato tabulka bude mít navíc v Internet Exploreru červený okraj, zatímco
v Mozille nikoliv.
Buňka A1
|
Buňka A2
|
Buňka B1
|
Buňka B2
|
|
Využití zhrouceného modelu tabulky k zobrazení obsahu buněk těsně vedle,
v tomto příkladě obrázků:
Buňka A1
|
Buňka A2
|
Buňka B1
|
Buňka B2
|
|
4 Podle druhé verze specifikace kaskádových stylů je možné parametrem
empty-cell ovlivnit chování okrajů u prázdných buněk a parametrem
caption-side určit umístění popisku k tabulce označkovaného jako
<caption>. Chtějme tedy, aby okraje u prázdných buněk
byly viditelné a popisek byl dole pod tabulkou.
|
Takto bude výsledek vypadat v Internet Exploreru, který výše zmíněným parametrům
nerozumí, takže pro zobrazení tabulky použije vlastní výchozí nastavení.
Popisek k tabulce
Buňka A1
|
Buňka A2
|
Buňka B1
|
|
|
V Mozille, která sice neumí umístit popisek nalevo ani napravo, ale
dolů ano, již bude výsledek vypadat podle zadání:
Buňka A1
|
Buňka A2
|
Buňka B1
|
|
Popisek k tabulce
|