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. Jsou příliš proměnlivé, příliš individuální, často je třeba formátovat konkrétně jednu unikátní buňku. Dělat to prostřednictvím CSS samozřejmě lze, ale je to poměrně nešikovné a pracné. 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ž je třeba formátovat 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 „%“ (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ů.

Jednotlivé buňky (td a th)

Z jednoho extrému se teď přenesme do druhého a podívejme se, jaké možnosti pro formátování nabízí jednotlivé buňky. K dispozici jsou následující atributy:

valign

Zarovnání obsahu buňky ve svislém směru. Máte tyto možnosti:

top	k hornímu okraji
bottom	k dolnímu okraji
middle	na střed
baseline	zarovná vůči sobě účaří prvních řádků obsahu buněk

align

Zarovnání obsahu buňky ve vodorovném směru. Může nabávat následujících hodnot:

left	k levému okraji
right	k pravému okraji
center	na střed
justify	do bloku (zarovnává levý i pravý okraj)
char	na daný znak (viz další atributy)

char

Při vodorovném zarovnání typu char určuje znak, na nějž má být obsah buněk zarovnán. Typicky například sloupec číselných hodnot má být zarovnán tak, aby desetinné čárky byly pod sebou (tím se pod sebou ocitnou stejné řády). Což provedete tak, že odpovídajícím buňkám nastavíte <td align="char" char=",">

charoff

Posunutí zarovnávaného znaku. Jeho hodnotou je číslo, udávající jak daleko od levého okraje buňky se má nacházet znak, na nějž je zarovnáván obsah buňky. Chápe se jako počet procent. Například <td align="char" char="-" charoff="33"> znamená, že obsah buňky má být zarovnán na znak „-“ a ten se má nacházet ve třetině šířky sloupce. Upřímně řečeno se atribut charoff používá velmi vzácně.

Prohlédněte si příklad zarovnání na znak.

Řádky (tr)

Řádky nabízejí stejné formátovací atributy jako jednotlivé buňky, čili valign, align, char a charoff. Uvedete-li je ve značce <tr>, budou se vztahovat na všechny buňky daného řádku. Pokud je ovšem přímo v buňce nezměníte – definice přímo v buňce „přebije“ definice z nadřazených celků.

Pro příklad se vrátím k ukázkové tabulce výnosů a nákladů. Má tři sloupce, z toho dva by něly být zarovnány doprava, aby se číslice stejných řádů dostaly pod sebe. Proto se vyplatí pomocí <tr> nastavit vodorovné zarovnání doprava a v první buňce, kterou je třeba zarovnat jinak, je pak změnit.

Zdrojový kód by byl:

<table>
<tr align="right">
  <th align="left">Měsíc</th>  <th>Výnosy</th> <th>Náklady</th>
</tr>
<tr align="right">
  <th align="left">Leden</th>  <td>12360</td>  <td>8619</td>
</tr>
<tr align="right">
  <th align="left">Únor</th>   <td>9833</td>   <td>6587</td>
</tr>
<tr align="right">
  <th align="left">Březen</th> <td>14209</td>  <td>10318</td>
</tr>
<tr align="right">
  <th align="left">Celkem</th> <td>36402</td>  <td>25542</td>
</tr>
</table>

A jeho výsledná podoba:

Měsíc	Výnosy	Náklady
Leden	12360	8619
Únor	9833	6587
Březen	14209	10318
Celkem	36402	25542