Formátování tabulek

V okolních částech textu opakovaně prohlašuji, že je záhodno oddělit obsah prezentace od formy a nezaplevelovat HTML kód konstrukcemi, jejichž cílem je dosáhnout určité vizuální podoby. Tu má zajistit CSS.

Tabulky představují výjimku potvrzující pravidlo. Někdy bývají proměnlivé, individuální, nezřídka je třeba formátovat konkrétně jednu unikátní buňku. Dělat to prostřednictvím CSS samozřejmě lze, s výhodou se dají využít třídy, nicméně někdy bývá výhodnější ovlivňovat formátování přímo v HTML. Proto pro tabulky zachovává i HTML5 řadu formátovacích parametrů ovlivňujících jejich vzhled. Jimi se budu zabývat v této části.

Vzhled tabulky zpravidla vychází z kombinace CSS pravidel určujících základní parametry a formátovacích atributů ovlivňujících individuální části, jež mají vypadat specificky.

Celá tabulka (table)

Prostřednictvím atributů prvku <table> se řídí vzhledové parametry celé tabulky. Jedním z těch méně potřebných je width, jehož prostřednictvím lze zadat celkovou šířku tabulky. Jako hodnotu použijte buď samotné číslo (pak znamená absolutní rozměr v obrazovkových bodech, čili pixelech), nebo číslo následované znakem „%“, které určuje šířku tabulky v procentech vůči aktuální šířce řádku.

Hned několik atributů se točí kolem rámečků a čar oddělujících navzájem jednotlivé buňky. Jsou to:

border

Šířka rámečku (v pixelech).

frame

Které části rámečku kolem tabulky vykreslovat. Možné hodnoty:

void	žádné
above	jen horní stranu
below	jen spodní stranu
hsides	horní a dolní stranu
vsides	levou a pravou stranu
lhs	jen levou stranu
rhs	jen pravou stranu
box	všechny čtyři
border	všechny čtyři

rules

Které části uvnitř tabulky od sebe oddělit čarami. Možné hodnoty:

none	žádné
groups	skupiny řádků a sloupců
rows	řádky
cols	sloupce
all	řádky i sloupce (čili buňky)

Podívejte se na příklady rámečků. Další dvojice atributů se týká mezerování uvnitř tabulky:

cellspacing

Šířka mezery mezi buňkami (v pixelech).

cellpadding

Šířka mezery mezi okrajem buňky a její hranicí (v pixelech).

Rozdíl mezi nimi spočívá v tom, že mezera vytvořená cellpadding je součástí buňky, zatímco mezera vzniklá na základě cellspacing leží mezi buňkami. Zadáte-li například cellspacing="10", vzniknou mezi buňkami mezery 10 pixelů široké. Pokud zadáte cellpadding="10", vloží se do každé buňky mezera velikosti 10 px mezi její obsah a hranici. Jinými slovy v tomto druhém případě se mezery sousedních buněk sčítají a vznikne celková mezera 20 pixelů.

Buňky (td a th) a řádky (tr)

Prvky tvořící obsah tabulky historicky mívaly několik atributů ovlivňujících zarovnání jejich obsahu. Později byly prohlášeny za zastaralé a neměly by se používat, protože na tyto věci máme CSS. Nicméně prohlížeče kvůli zpětné kompatibilitě alespoň ty nejběžnější dosud podporují, takže je v případě nouze lze použít.

Patří sem především align pro vodorovné zarovnání a valign pro zarovnání ve svislém směru.