Tabulky I.

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>

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

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>