XHTML – tabulky

Tímto článkem se začneme zabývat tabulkami. Z běžného života je jistě dobře znáte, používají se k prezentaci různých ceníků, srovnání a dalších „tabulkových dat“. Jistě ale nevíte, jak takovou tabulku vložit do XHTML dokumentu…

Tabulky v XHTML dávají nám, autorům, možnost prezentovat na stránce data dvojrozměrně – uživatel může tato data vnímat jak v řádcích tak ve sloupcích. To je u mnoha typů dat poměrně vhodný a většinou nenahraditelný prostředek.

Z této „dvojrozměrnosti“ však vyplývají i nevýhody, tabulka musí být prezentována ve dvojrozměrném výstupu (obrazovce) a pokud možno celá najednou. Bohužel ne všechna zařízení pro práci s webem (např. čtečky obrazovky) mají tyto schopnosti, a i když XHTML obsahuje prostředky ke zpřístupnění tabulky i v takových zařízeních, vždy je zde práce s tabulkou poměrně komplikovaná a zdlouhavá. Proto je lepší použití tabulky nejprve pořádně zvážit, a pokud je data možné reprezentovat jinou formou (např. pomocí výčtu), použít tuto formu nebo ji alespoň nabídnout jako alternativu k tabulce.

Kromě uspořádání tabulkových dat se tabulky někdy používají i k vytvoření vzhledu stránky – této praxe byste se ale již měli vyvarovat a přenechat vzhled stránky stylům.

Z čeho se skládá tabulka

Každá tabulka v XHTML je tvořena svým titulkem a samotnými daty. Ta se nacházejí v takzvaných buňkách. Každá buňka patří minimálně do jednoho řádku a jednoho sloupce. Řádky se mohou seskupovat do skupin řádků a sloupce do skupin sloupců.

Element table – ohraničení tabulky

Povolený obsah: (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))

Atributy:

%attrs;

Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).

summary       %Text;       #IMPLIED

V tomto atributu se má nacházet souhrn účelu a struktury tabulky pro nevizuální interprety XHTML, např. čtečku obrazovky.

width       %Length;       #IMPLIED

Nastavuje šířku tabulky.

border       %Pixels;       #IMPLIED

Tento atribut určuje šířku rámečku.

frame       %TFrame;       #IMPLIED

Tento atribut určuje, jaké strany rámečku kolem tabulky budou viditelné:

void

Žádná strana nebude viditelná – tak tomu je i pokud tento atribut nenastavíte.

above

Jenom horní strana orámování bude viditelná.

below

Jenom dolní strana orámování bude viditelná.

hsides

Jenom horní a dolní strana bude viditelná.

vsides

Viditelné budou jenom levá a pravá strana.

lhs

Viditelná bude jenom levá strana.

rhs

Viditelná bude jenom pravá strana.

box nebo border

Všechny strany budou viditelné.

rules       %TRules;       #IMPLIED

Tento atribut určuje, jaký způsob orámování se použije uvnitř tabulky (jak budou orámovány její buňky):

none

Uvnitř tabulky nebude žádné orámování.

groups

Orámováním od sebe budou odděleny skupiny řádek a skupiny sloupců (k těm se ještě dostaneme v dalších dílech).

rows

Orámováním od sebe budou odděleny řádky tabulky.

cols

Orámováním od sebe budou odděleny sloupce tabulky.

all

Orámováním od sebe budou odděleny všechny řádky i sloupce tabulky.

cellspacing       %Length;       #IMPLIED

Tento atribut nastavuje množství volného místa, které se má nacházet mezi buňkami tabulky.

cellpadding       %Length;       #IMPLIED

Tento atribut nastavuje množství volné místa mezi orámováním buňky a jejím obsahem.

Element table v XHTML 1.0 Strict DTD

Všechny prvky tabulky, jako jsou buňky nebo řádky, se nacházejí uvnitř elementu table. Ten může podle DTD obsahovat postupně:

1. nepovinně jeden element caption,
2. libovolné množství (i nula) elementů col nebo libovolné množství elementů colgroup,
3. nepovinně jeden element thead,
4. nepovinně jeden element tfoot a
5. jeden či více elementů tbody nebo jeden či více elementů tr.

Základní struktura tabulky by proto mohla vypadat například takto (nám zatím neznáme elementy jsou pouze naznačeny):

<table summary=“Ukázková tabulka – obsahuje x sloupců a y řádků. První řádky reprezentují…“>
  <caption></caption>
  <col />
  <col />
  <thead></thead>
  <tfoot></tfoot>
  <tbody></tbody>
  <tbody></tbody>
</table>

Poznámka: Možná jste si všimli, že i ve striktní verzi XHTML lze využít u elementu table (i dalších tabulkových elementů, ke kterým se ještě dostaneme) mnoha atributů, které určují vzhled tabulky. Již ale víte, že k nastavení vzhledu stránky slouží styly, tyto atributy by tedy neměly do striktního XHTML patřit. Ve skutečnosti ale v době publikování HTML 4 ještě jazyk CSS neměl vlastní řešení vzhledu tabulek, proto byly tyto atributy ve striktním HTML ponechány. Dnes již však lze nastavit vzhled tabulek i v CSS, a proto byste vzhledové atributy tabulek neměli používat – já je zde budu uvádět pouze ve stručnosti a nebudeme se jimi příliš zatěžovat.

V příštím článku se budeme zabývat titulkem tabulky, skupinami řádků i řádky samotnými.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.