Tabulky v HTML 4

Přestože již od uvedení normy HTML 4 uplynulo několik let a prohlížeče se jí více méně přizpůsobily, pro konstrukci tabulek se stále převážně využívají jenom tradiční značky <table>, <tr> a <td>. HTML 4 ale nabízí mnohem víc.

Podívejme se nejprve, jaké značky jsou pro tabulky k dispozici a co znamenají:

<table>

ohraničuje celou tabulku

<caption>

určuje popisek tabulky (buď nad, nebo pod tabulkou)

<colgroup>

definuje skupiny sloupců a jejich vlastnosti

<col>

definuje vlastnosti sloupce

<thead>

vymezuje řádky tvořící záhlaví tabulky

<tbody>

definuje skupiny řádků

<tfoot>

vymezuje řádky tvořící zápatí tabulky

<tr>

vymezuje jednotlivé řádky tabulky

<th>

vymezuje jednotlivé buňky v rámci záhlaví tabulky

<td>

vymezuje jednotlivé buňky

Než se pustím do jednotlivých prvků a jejich atributů, podívejte se, jak jsou navzájem provázané a jak do sebe zapadají. Názorně to ukazuje toto schéma:

Aby bylo schéma jednoznačné, musím ještě doplnit tyto pravidla:

• Nepárové značky jsou pro přehlednost doplněny koncovým lomítkem, které je v praxi (v případě HTML 4) nadbytečné.

• Není-li řečeno jinak, jsou všechny prvky uvnitř tabulky nepovinné.

• Je-li v tabulce <caption>, musí být prvním prvkem přímo uvnitř <table>.

• Prvky <colgroup> musí být umístěny za nepovinným <caption> a před nepovinným <thead>.

• Prvek <col> může být umístěn uvnitř <colgroup> nebo na stejném místě jako <colgroup>.

• Prvek <thead> může být v tabulce pouze jednou a je-li použit, musí být za nepovinnými <caption>, <colgroup> a <col> a před <tbody>. <thead> musí obsahovat alespoň jeden prvek <tr>.

• Prvek <tbody> může být v tabulce víckrát, vždy však mezi nepovinnými <thead> a <tfoot>. Pokud tabulka neobsahuje prvky <thead> a <tfoot>, je značka <tbody> nepovinná. <tbody> musí obsahovat alespoň jeden prvek <tr>.

• Prvek <tfoot> může být v tabulce pouze jednou a je-li použit, musí být za nepovinným <thead> a před <tbody>. <tfoot> musí obsahovat alespoň jeden prvek <tr>.

A nyní již k jednotlivým prvkům a jejich atributům. Prvky <table>, <tr> a <td> se zabývat nebudu, ty jsou vám již jistě notoricky známé. Také nebudu vyjmenovávat všechny atributy, alepouze ty, které mají praktický význam a nejsou zavrženy (deprecated).

<caption>....</caption>

Prvek caption by měl obsahovat popisek, nebo nadpis celé tabulky. Může obsahovat pouze text a řádkové prvky.

<col>

Značkou <col> lze definovat atributy společné celému sloupci (sloupcům). Kromě obecných (style, class, id, atd.), jsouk dispozici tyto atributy:

span

Určuje počet sloupců, které sdílejí ostatní dané atributy, ke sloučení sloupců tím ale nedochází a pro logické seskupení sloupců je správné použít <colgroup>

width

Určuje šířku sloupce buď počtem pixelů (width="40"), nebo procentem z celkové šířky tabulky (width="20%"), nebo relativně vzhledem k ostatním sloupcům (width="3*").

align

Definuje vodorovné zarovnání obsahu buněk sloupce. Možnosti jsou "left" (vlevo), "center" (na střed), "right" (vpravo), "jusitfy" (do bloku) a "char". Hodnota "char" umožňujev kombinaci s atributem charoff dosáhnout zarovnání např. podle desetinné čárky. Příklad: char="," charoff="50%" vystředí obsah buněk sloupce podle první čárky.

valign

Určuje svislé zarovnání obsahu buněk sloupce. Možné hodnoty jsou "top" (nahoru), "middle" (na střed), "bottom" (dolů) a "baseline".

<colgroup>....</colgroup>

Definuje skupinu sloupců v rámci tabulky. Na rozdíl od značky <col>, která určuje pouze společné, většinou prezentační atributy, má <colgroup> význam strukturální. Sloupce takto sdružené by tedy měly mít něco významově společného. Atributy jsou stejné jako u <col>.

<thead>....</thead>

Vymezuje řádky tvořící záhlaví tabulky. Musí obsahovat alespoň jeden řádek (prvek <tr>), který dále obsahuje alespoň jednu buňku (nejčastěji <th>, ale i <td>). V tabulce může být maximálně jeden prvek <thead> a pokud v tabulce je, stává se značka <tbody> povinnou.

<tfoot>....</tfoot>

Vymezuje řádky tvořící zápatí tabulky. Musí obsahovat alespoň jeden řádek (prvek <tr>), který dále obsahuje alespoň jednu buňku (prvek <td>). V tabulce může být maximálně jeden prvek <tfoot> a pokud v tabulce je, stává se značka <tbody> povinnou.

Zásadní nevýhodou značky <tfoot> je, že je-li uvedena, musí se nacházet před tělem tabulky <tbody>. Proto se ve starších prohlížečích, které HTML 4 nepodporují dostatečně, zobrazí na začátku, a nikoli na konci tabulky.

<th>....</th>

Tento prvek vymezuje obsah buňky v případě, že se jedná o záhlaví. Jedná se tedy o strukturální prvek, který napomáhá jak logickému formátování tabulek pomocí CSS, tak správné interpretaci tabulek hlasovými zařízeními.

Z tohoto pohledu je zejména zajímavý atribut scope, který udává působnost záhlaví buď na sloupec (scope="col"), řádek (scope="row"), skupinu sloupců (scope="colgroup"), nebo skupinu řádků (scope="rowgroup"). Kromě toho existují ještě další, poměrně složitě využitelné atributy a pak atributy shodné se značkou <td> (rowspan, colspan, align, valign).

<tbody>....</tbody>

Vymezuje skupinu řádků uvnitř tabulky. Tabulka může obsahovat víc prvků <tbody>. Naopak, pokud tabulka neobsahuje ani <thead>, ani <tfoot>, nemusíte použít ani <tbody>.

Na závěr článku ještě uvedu pár rad a tipů pro tvorbu tabulek:

• Snažte se tabulky používat především pro tabelování dat. Pokud používáte tabulky pro layout, snažte se o co nejjednodušší strukturu a nepoužívejte značky se zvláštním významem (<thead>, <tfoot>, <th>).

• Čím jednodušší tabulka, tím lépe. Pokud zobrazovaná data nejsou složitá, i v HTML 4 si vystačíte s jednoduchou tabulkou obsahující pouze prvky <tr>, <td> a <th>.

• Značky <col>, <colgroup>, <thead> a další lze s výhodou použít jako selektory v definici CSS. Velmi elegantně tím můžete sjednotit vzhled všech tabulek celého webu.

• Pozor na kompatibilitu prohlížečů. Nepočítejte s tím, že se vám ve starších prohlížečích podaří např. formátovat sloupce pomocí <col> a <colgroup>. To by vám však nemělo bránit tyto standardní prvky použít tam, kde mají svůj strukturální význam.

Chcete-li si vyzkoušet, co váš prohlížeč zvládne, podívejte se na vzorovou stránku