XHTML – tabulky

19. září 2003

•

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ě:

nepovinně jeden element caption,
libovolné množství (i nula) elementů col nebo libovolné množství elementů colgroup,
nepovinně jeden element thead,
nepovinně jeden element tfoot a
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):

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.