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.

Žádný příspěvek v diskuzi

Odpovědět