COMPUTERWORLD o Internetu

Specializovan² t²denφk o v²poΦetnφ technice
o Internetu
(CW 33/97)

Vytvß°φme si domovskou strßnku
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 si pak vÜimneme podrobn∞ji atribut∙, 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 (obrßzek 1):

<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 zapsat 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 (viz obrßzek 2):

<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 trochu slo₧it∞jÜφ tabulce (viz obrßzek 3):

<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>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<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<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>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>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<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 (viz obr. 4):

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 z obrßzku 5:

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:

V²sledek v prohlφ₧eΦi dopadne ji₧ tak, jak jsme cht∞li (obr. 6).

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

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

Vytvß°φme si domovskou strßnku Tabulky I.

| <<< | CW o Internetu | COMPUTERWORLD | IDG CZ homepage |

Vytvß°φme si domovskou strßnku
Tabulky I.