XHTML – buňky tabulky

1. října 2003

•

Dnes si budeme povídat o nejdůležitější součásti tabulek, a sice jejích buňkách. Ukážeme si, jak je používat i jak pomocí některých jejich atributů zpřístupnit tabulku pro nevizuální prohlížeče.

Elementy th a td – buňky tabulky

Povolený obsah: %Flow;

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).

abbr %Text; #IMPLIED

V tomto atributu by se měla nacházet zkrácená podoba obsahu buňky, pokud je její obsah delší. To se týká hlavně hlavičkových buněk, jejichž obsah může být při nevizuálním výstupu mnohokrát opakován. Hodnotu tohoto atributu může ale použít i vizuální prohlížeč a vykreslit ji jako obsah elementu, v případě že v buňce nemá dostatek místa na vykreslení jejího celého obsahu.

axis CDATA #IMPLIED

Pomocí tohoto atributu může být buňka přiřazena do určité kategorie, jeho hodnotou jsou čárkou oddělená jména kategorií. K tomuto tématu se dnes ještě dostaneme.

headers IDREFS #IMPLIED

Tento atribut obsahuje mezerou oddělená ID-jména těch hlavičkových buněk, které patří k dané buňce. Vše si ještě detailněji vysvětlíme.

scope (row|col|rowgroup|colgroup) #IMPLIED

Tento atribut je jednodušší alternativou atributu headers. Nastavuje se u hlavičkových buněk a určuje, ke kterým buňkám s daty daná hlavičková buňka patří. Může nabývat jedné z těchto hodnot:

row: Daná buňka je hlavičková pro buňky, které následují v řádku za ní.
col: Daná buňka je hlavičková pro buňky, které následují v sloupci za ní.
rowgroup: Daná buňka je hlavičková pro buňky, které následují ve skupině řádků za ní.
colgroup: Daná buňka je hlavičková pro buňky, které následují ve skupině sloupců za ní.

rowspan %Number; "1"

Tento atribut říká, na kolika řádcích se daná buňka rozpíná. Výchozí hodnotou je 1, hodnota 0 znamená, že buňka se rozpíná přes všechny řádky od toho, v kterém se nachází, až po konec skupiny řádků (thead, tbody a tfoot), v které se nachází.

colspan %Number; "1"

Tento atribut říká, v kolika sloupcích se daná buňka rozpíná. Výchozí hodnotou je opět 1, hodnota 0 znamená, že buňka se rozpíná přes všechny sloupce od toho, v kterém se nachází, až po konec skupiny sloupců (element colgroup, kterým se ještě budeme zabývat), v které se nachází.

align (left|center|right|justify|char) #IMPLIED

Tento atribut určuje vodorovné zarovnání obsahu v buňce, má zde stejný význam jako u skupin řádků.

char %Character; #IMPLIED

Tento atribut nastavuje znak, podle kterého se má obsah buňky zarovnat. Také jsme se jím již zabývali u skupin řádků.

charoff %Length; #IMPLIED

Tento atribut určuje odsazení zarovnávacího znaku, má také stejný význam jako u skupin řádků.

valign (top|middle|bottom|baseline) #IMPLIED

Atribut valign určuje svislé zarovnání obsahu v buňce, také jsme se jím již zabývali.

Element th v XHTML 1.0 Strict DTD

Element td v XHTML 1.0 Strict DTD

V XHTML můžeme použít dva typy buněk v tabulce:

hlavičkové, ve kterých se nachází nějaké hlavičkové informace (např. názvy produktů), jsou reprezentovány elementem th a ve vizuálních prohlížečích je jejich obsah obvykle vykreslen tučným písmem (to lze ale změnit ve stylech) a
datové, ve kterých se nachází samotná data (např. množství prodaných produktů) a jsou reprezentovány elementem td.

U obou typů hlaviček můžeme použít ty samé atributy, i když ne všechny vždy dávají smysl. Atributy abbr, axis a scope naleznou své využití hlavně u hlavičkových buněk, zatímco headers u datových buněk.

Buňky mohou být i prázdné (pomocí zápisu <td></td> nebo <th></th>). Styly v takovém případě určují, jestli budou tyto buňky zobrazeny.

Buňky mohou obsahovat téměř libovolné další elementy i text, jejich obsah je velmi volný (vzhledem k parametrické entitě %Flow;).

Příklad

Nyní již konečně máme dostatek znalostí na to, abychom si mohli ukázat první kompletní tabulku. Bude se jednat o přehled cen zájezdů do různých zemí v různých měsících. Pod těmito cenami se bude nacházet vždy ta nejlevnější nabídka:

<table summary=“Tato tabulka obsahuje ceny našich zájezdů. V prvním řádku se nacházejí země, kam se můžete vydat, v prvním sloupci se nacházejí měsíce, ve kterých lze zájezd uskutečnit. Poslední řádek obsahuje nejlevnější cenu zájezdu ze všech měsíců.“>
  <caption>Ceny zájezdů</caption>
  <thead>
    <tr>
      <th></th>
      <th>Anglie</th>
      <th>USA</th>
      <th>Maledivy</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Nejlevnější</th>
      <td>7 000 Kč</td>
      <td>30 000 Kč</td>
      <td>40 000 Kč</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Květen</th>
      <td>10 000 Kč</td>
      <td>30 000 Kč</td>
      <td>40 000 Kč</td>
    </tr>
    <tr>
      <th>Červenec</th>
      <td>15 000 Kč</td>
      <td>40 000 Kč</td>
      <td>65 000 Kč</td>
    </tr>
    <tr>
      <th>Září</th>
      <td>7 000 Kč</td>
      <td>35 000 Kč</td>
      <td>50 000 Kč</td>
    </tr>
  </tbody>
</table>

Všimněte si:

jakým způsobem jsme použili atribut summary elementu table a element caption,
jak jsme rozčlenili tabulku na části pomocí elementů thead, tfoot a tbody,
že hlavičkové buňky vyznačujeme pomocí th, datové pomocí td a
že uvnitř čísel a mezi číslem a zkratkou měny se nachází nedělitelná mezera, o které jsme mluvili již na začátku našeho seriálu – to zabrání prohlížeči rozdělit tyto hodnoty na více řádků při vizuálním výstupu.

Nyní se podívejte na to, jak takovou tabulku zobrazí vizuální prohlížeč po přiřazení několika stylů:

Takto zobrazí tabulku z předchozího příkladu vizuální prohlížeč.

Atributy rowspan a colspan

Nyní si ukážeme efekt atributů rowspan a colspan na buňky tabulky. Pozměníme trochu záhlaví tabulky z předchozího příkladu:

  <thead>
    <tr>
      <th></th>
      <th colspan=“2″>Anglie</th>
      <th rowspan=“2″>USA</th>
      <th rowspan=“2″>Maledivy</th>
    </tr>
    <tr>
      <th></th>
      <th title=“sever Anglie“>sever</th>
      <th title=“jih Anglie“>jih</th>
    </tr>
  </thead>

Tímto krokem jsme buňku „Anglie“ rozšířili do dvou sloupců, protože se v řádku pod ní má nacházet ještě rozdělení zájezdů na sever Anglie a jih Anglie. Buňky „USA“ a „Maledivy“ ale žádné rozdělené nepotřebují, proto jsme je roztáhli do dvou řádků. Samozřejmě jsme do těla a zápatí tabulky museli přidat ještě jeden sloupec, protože do Anglie nyní máme dva druhy zájezdů. Obrázek pomůže v pochopení:

Takto zobrazí tabulku z předchozího příkladu vizuální prohlížeč.

Vždy byste měli dbát na to, aby v žádném řádku tabulky nechyběla ani nepřebývala žádná buňka – tedy aby tabulka „přesně pasovala“. Zajistit to můžete pomocí vhodné kombinace elementů td, th (i prázdných) a jejich atributů colspan a rowspan.

Atributy pro zpřístupnění tabulky v nevizuálním prohlížeči

Nejprve si předvedeme, jak by vypadal kód prvního příkladu v případě, že bychom ho chtěli zpřístupnit pomocí atributu scope:

<table summary=“Tato tabulka obsahuje ceny našich zájezdů…“>
  <caption>Ceny zájezdů</caption>
  <thead>
    <tr>
      <th></th>
      <th scope=“col“>Anglie</th>
      <th scope=“col“>USA</th>
      <th scope=“col“>Maledivy</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th scope=“row“>Nejlevnější</th>
      <td>7 000 Kč</td>
      <td>30 000 Kč</td>
      <td>40 000 Kč</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th scope=“row“>Květen</th>
      <td>10 000 Kč</td>
      <td>30 000 Kč</td>
      <td>40 000 Kč</td>
    </tr>
    <tr>
      <th scope=“row“>Červenec</th>
      <td>15 000 Kč</td>
      <td>40 000 Kč</td>
      <td>65 000 Kč</td>
    </tr>
    <tr>
      <th scope=“row“>Září</th>
      <td>7 000 Kč</td>
      <td>35 000 Kč</td>
      <td>50 000 Kč</td>
    </tr>
  </tbody>
</table>

Hlavičkovým buňkám jsme přiřadili takovou hodnotu atributu scope, aby nevizuální interpret XHTML mohl určit pro každou datovou buňku i hlavičkové buňky, které k ní patří. U každé datové buňky potom může uživatele obeznámit i s hlavičkovými buňkami, které k ní náleží.

Atribut scope je vhodný pro zpřístupnění jednoduchých tabulek, jako je ta z prvního příkladu. V praxi bychom se rozhodli v tomto případě určitě pro tento atribut. Z demonstračních účelů vám ale nyní předvedu zpřístupnění tabulky i pomocí atributu headers:

<table summary=“Tato tabulka obsahuje ceny našich zájezdů…“>
  <caption>Ceny zájezdů</caption>
  <thead>
    <tr>
      <th></th>
      <th id=“hlavicka1″>Anglie</th>
      <th id=“hlavicka2″>USA</th>
      <th id=“hlavicka3″>Maledivy</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th id=“hlavicka4″>Nejlevnější</th>
      <td headers=“hlavicka1 hlavicka4″>7 000 Kč</td>
      <td headers=“hlavicka2 hlavicka4″>30 000 Kč</td>
      <td headers=“hlavicka3 hlavicka4″>40 000 Kč</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th id=“hlavicka5″>Květen</th>
      <td headers=“hlavicka1 hlavicka5″>10 000 Kč</td>
      <td headers=“hlavicka2 hlavicka5″>30 000 Kč</td>
      <td headers=“hlavicka3 hlavicka5″>40 000 Kč</td>
    </tr>
    <tr>
      <th id=“hlavicka6″>Červenec</th>
      <td headers=“hlavicka1 hlavicka6″>15 000 Kč</td>
      <td headers=“hlavicka2 hlavicka6″>40 000 Kč</td>
      <td headers=“hlavicka3 hlavicka6″>65 000 Kč</td>
    </tr>
    <tr>
      <th id=“hlavicka7″>Září</th>
      <td headers=“hlavicka1 hlavicka7″>7 000 Kč</td>
      <td headers=“hlavicka2 hlavicka7″>35 000 Kč</td>
      <td headers=“hlavicka3 hlavicka7″>50 000 Kč</td>
    </tr>
  </tbody>
</table>

Jak vidíte, tento způsob je o dost náročnější, hlavně co se psaní týče. U složitějších tabulek již ale nemáte většinou na výběr, protože jejich struktura neumožňuje použití atributu scope.

Co jsme tedy udělali? Nejprve jsme si pojmenovali pomocí atributu id všechny hlavičkové buňky a poté jsme u každé datové buňky pomocí atributu headers určili, k jakým hlavičkovým buňkám tato datová buňka patří (použili jsme zde hodnoty atributu id těchto buněk).

Atribut axis

Pomocí atributu axis můžeme přiřadit každou hlavičkovou buňku do nějaké kategorie (kterou si sami vytvoříme). Např. buňky „Anglie“, „USA“ a „Maledivy“ z našeho prvního příkladu bychom mohli přiřadit do kategorie „Země“ a buňky „Květen“, „Červenec“ a „Září“ do kategorie „Měsíce“.

Díky tomu budeme u každé datové buňky znát její hlavičkové buňky i kategorie, do kterých tyto buňky patří. To může počítači pomoct v prezentaci tabulky i v jejím zpracování.

Více o atributu axis i o ostatních „zpřístupňovacích“ atributech (headers, scope a abbr) se dozvíte v mém článku Odstraňte bariéry svého webu – tabulky. Tento článek vám doporučuji i v případě, že máte potíže s pochopením významu těchto atributů.

V příštím článku se naučíme, jak ovládat sloupce tabulky.