Tabulky I.

Jiří Kosek ml.

Dnes se podíváme na základní elementy a atributy, které nám umožní do stránek vložit pěkně zarovnané údaje v podobě tabulek. V následujícím pokračování seriálu se pak podíváme podrobněji na atributy, které nám umožňují precizně řídit výsledný vzhled tabulky.

Tabulka se do stránky vkládá pomocí elementu TABLE. Uvnitř elementu pak postupně zapisujeme jednotlivé buňky tabulky. Buňky se zapisují po řádcích. Řádka tabulky je uzavřena mezi tagy <TR> a </TR>. Jednotlivé buňky v řádce se pak uzavírají mezi tagy <TD> a </TD> nebo <TH> a </TH>. Element TD se používá pro normální buňky a TH pro buňky v hlavičce tabulky. Jednoduchou tabulku můžeme tedy zapsat takto:

<TABLE>
    <TR>
        <TH>Rok</TH>
        <TH>Obrat</TH>
    </TR>
    <TR>
        <TD>1995</TD>
        <TD>2,6 mil</TD>
    </TR>
    <TR>
        <TD>1996</TD>
        <TD>2,9 mil</TD>
    </TR>
    <TR>
        <TD>1997</TD>
        <TD>2,1 mil</TD>
    </TR>
</TABLE>

Na obrázku vidíme, že buňky záhlaví (TH) se zobrazují tučným písmem a jsou vycentrovány.

Jelikož všechny ukončovací tagy </TR>, </TH> a </TD> si může prohlížeč domyslet z kontextu, není je potřeba uvádět. Naši tabulku můžeme tedy zaspat i mnohem úsporněji a přehledněji:

<TABLE>
    <TR><TH>Rok        <TH>Obrat
    <TR><TD>1995       <TD>2,6 mil
    <TR><TD>1996       <TD>2,9 mil
    <TR><TD>1997       <TD>2,1 mil
</TABLE>

Pokud chceme mít v tabulce mřížku, která by oddělovala jednotlivé buňky, stačí u tagu <TABLE> uvést atribut BORDER:

<TABLE BORDER>
    <TR><TH>Rok        <TH>Obrat
    <TR><TD>1995       <TD>2,6 mil
    <TR><TD>1996       <TD>2,9 mil
    <TR><TD>1997       <TD>2,1 mil
</TABLE>

Někdy potřebujeme několik buněk tabulky sloučit dohromady -- např. pro společný nadpis nad více sloupci. Pokud chceme sloučit několik buněk v jednom řádku do jedné buňky, stačí u tagu <TH> nebo <TD> uvést atribut COLSPAN. Jako jeho hodnotu uvedeme počet buněk, které mají být sloučeny. Vše si ukážeme na složitější tabulce:

<TABLE BORDER>
<TR><TH>Fáze
    <TH COLSPAN="6">Výstup aproximačního registru
    <TH>Výstup DA převodníku
    <TH COLSPAN="2">Výstup komparátoru
<TR><TH>1. <TD>1 <TD>0 <TD>0 <TD>0 <TD>0 <TD>0
    <TD>2.50 V <TD>  1  <TD>(3 V&gt;2.50 V)
<TR><TH>2. <TD>1 <TD>1 <TD>0 <TD>0 <TD>0 <TD>0
    <TD>3.75 V <TD>  0  <TD>(3 V&lt;3.75 V)
<TR><TH>3. <TD>1 <TD>0 <TD>1 <TD>0 <TD>0 <TD>0
    <TD>3.13 V <TD>  0  <TD>(3 V&lt;3.13 V)
<TR><TH>4. <TD>1 <TD>0 <TD>0 <TD>1 <TD>0 <TD>0
    <TD>2.81 V <TD>  1  <TD>(3 V&gt;2.81 V)
<TR><TH>5. <TD>1 <TD>0 <TD>0 <TD>1 <TD>1 <TD>0
    <TD>2.97 V <TD>  1  <TD>(3 V&gt;2.97 V)
<TR><TH>6. <TD>1 <TD>0 <TD>0 <TD>1 <TD>1 <TD>1
    <TD>3.05 V <TD>  0  <TD>(3 V&lt;3.05 V)
<TR><TH>7. <TD>1 <TD>0 <TD>0 <TD>1 <TD>1 <TD>0
</TABLE>

Vidíme, že text v buňkách vytvořených pomocí <TD> je přiražen k pravému okraji buňky. Zvláště u širších buněk by bylo hezčí mít text uprostřed. Způsob zarovnání můžeme u každé buňky ovlivňovat pomocí atributu ALIGN. K vycentrování buněk by tedy stačilo místo <TD> použít <TD ALIGN=CENTER>. Vzhledem k počtu buněk by tento postup byl velmi pracný. Trošku si ho můžeme ulehčit tím, že společný způsob zarovnání lze určit pro celou řádku uvedením atributu ALIGN u tagu <TR>. Tohoto postupu se přidržíme i my a dostaneme již mnohem hezčí tabulku:

Buňky lze slučovat i ve sloupcích. Místo COLSPAN musíme použít atribut ROWSPAN. Použití ilustrujeme následující tabulkou:

<TABLE BORDER>
<TR><TH ROWSPAN="2">Tab. 1
    <TD ALIGN=CENTER><VAR>x</VAR>
    <TD ALIGN=CENTER>1
    <TD ALIGN=CENTER>2
    <TD ALIGN=CENTER>3
    <TD ALIGN=CENTER>4
    <TD ALIGN=CENTER>5
<TR><TD><VAR>x<SUP>2</SUP></VAR>
    <TD ALIGN=CENTER>1
    <TD ALIGN=CENTER>4
    <TD ALIGN=CENTER>9
    <TD ALIGN=CENTER>16
    <TD ALIGN=CENTER>26
</TABLE>

Vidíme, že ač jsme použili centrování jednotlivých buněk, nejsou čísla přesně uprostřed buňky. To je způsobeno tím, že kromě čísla se obsahem buňky stává i mezera za číslem. Mezeru můžeme odstranit buď uvedením ukončovacího tagu ihned za obsahem buňky nebo těsným připojením tagu pro následující buňku. Ukázku obou přístupů zkombinujeme v následujícím HTML-kódu:

<TABLE BORDER>
<TR><TH ROWSPAN="2">Tab. 1</TH>
    <TD ALIGN=CENTER><VAR>x</VAR></TD>
    <TD ALIGN=CENTER>1<TD ALIGN=CENTER>2<TD
        ALIGN=CENTER>3<TD ALIGN=CENTER>4<TD
        ALIGN=CENTER>5</TD>
<TR><TD><VAR>x<SUP>2</SUP></VAR></TD>
    <TD ALIGN=CENTER>1<TD ALIGN=CENTER>4<TD
        ALIGN=CENTER>9<TD ALIGN=CENTER>16<TD
        ALIGN=CENTER>26</TR>
</TABLE>

Výsledek v prohlížeči dopadne již tak, jak jsme chtěli:

Uvnitř elementu TABLE můžeme ještě před definicí jednotlivých řádek tabulky použít element CAPTION. Tento element slouží k zadání popisu tabulky, který se zobrazí společně s tabulkou.

<TABLE BORDER>
    <CAPTION>Vývoj obratu</CAPTION>
    <TR><TH>Rok</TH>        <TH>Obrat</TH>
    <TR><TD>1995</TD>       <TD>2,6 mil</TD>
    <TR><TD>1996</TD>       <TD>2,9 mil</TD>
    <TR><TD>1997</TD>       <TD>2,1 mil</TD>
</TABLE>