Tabulky

Obsah lekce:

Popis tabulek

Tabulky jsou v jazyce HTML velmi mocným nástrojem. Jejich použitím lze nejen tisknout přehledné sloupce různých hodnot, ale i vytvořit profesionálně vyhlížející stránku použitím různých tabulkových "triků", které budou popsány v rámci této kapitoly.

Nutno předem upozornit, že tabulky jsou do standardu jazyka zahrnuty až od jeho verze 3.0, a tedy některé starší prohlížeče je nemusí umět používat.

Definice tabulky je dána návěštím <TABLE> a </TABLE>. Atribut BORDER této značky umožňuje zviditelnění tabulky. Stejně jako u formulářů, je nutné i v tomto případě v kontejneru tabulky použít další příkazy, které umožňují specifikovat konečný vzhled celé tabulky. Návěští <TR> definuje řádek tabulky, který obsahuje návěští (většinou několik) <TD> představující sloupce dat.

Návěští <TH> (table header) pak definuje nadpis jednotlivých sloupečků dat. Pomocí značky <CAPTION> je možné přidat k tabulce popisek, který bude zarovnán na střed tabulky.

Příklad použití tabulky:

<TABLE BORDER>
<CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
<TR>
<TH></TH> <TH>Ascii</TH>
<TH>Latin2</TH> <TH>Kamenik</TH>
</TR>
<TR>
<TD>Windows</TD> <TD>html_wa.zip</TD>
<TD>html_wl2.zip</TD> <TD>html_wk.zip</TD>
</TR>
<TR>
<TD>Unix</TD> <TD>html_ua.tgz</TD>
<TD>html_ul2.tgz</TD> <TD>html_uk.tgz</TD>
</TR>
</TABLE>

Zobrazení:

Specifikace jmen souborů Výuky HTML
	Ascii	Latin2	Kamenik
Windows	html_wa.zip	html_wl2.zip	html_wk.zip
Unix	html_ua.tgz	html_ul2.tgz	html_uk.tgz

Poznámka: Jistě jste si všimli, že hned první políčko je bez okrajů, protože neobsahuje žádná data. Pokud tomu chcete zabránit, je možné jako hodnotu toho pole dát mezeru vloženou do kontejneru <PRE> ... </PRE> (předformátovaný text). Samotnou mezeru bez tohoto příkazu prohlížeč nezobrazí.

<TABLE BORDER>
<CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
<TR>
<TH><PRE> </PRE></TH> <TH>Ascii</TH>
<TH>Latin2</TH> <TH>Kamenik</TH>
</TR>
...
</TABLE>

Zobrazení:

Specifikace jmen souborů Výuky HTML
	Ascii	Latin2	Kamenik
Windows	html_wa.zip	html_wl2.zip	html_wk.zip
Unix	html_ua.tgz	html_ul2.tgz	html_uk.tgz

...posloupnost_prvků_tabulky...

</TABLE>

`width`	specifikuje šířku tabulky (implicitně v pixelech), použitím přípony "%" je možno hodnoty zadávat i relativně vzhledem k šířce okna prohlížeče (např. `width="50%"`)
`cols`	specifikuje celkový počet sloupců tabulky a napomáhá prohlížecímu programu určit počáteční zobrazení tabulky
`colspec`	specifikuje šířky a zarovnání jednotlivých sloupců (např. `colspec="L8 C20 R50"`; L,R,C specifikuje zarovnání vlevo, vpravo, centrovaně)
`align`	ovlivňuje umístění objektu vůči okolí `left` vodorovné umístění objektu na levý okraj `right` vodorovné umístění objektu na pravý okraj `center` zarovnání doprostřed mezi levý a pravý okraj okna `justify` zarovnání do bloku (roztažení mezi levý a pravý okraj okna - pokud to jde) `bleedleft` rozšíření Netscape `bleedright` rozšíření Netscape
`frame`	určuje způsob zobrazení vnějších obrysů tabulky `none/void` žádný obrys (implicitní hodnota) `above` jen horní strana `below` jen dolní strana `hsides` horní a dolní strana `lhs` jen levá strana `rhs` jen pravá strana `vsides` levá a pravá strana `border/box` všechny čtyři strany
`border`	určuje tloušťku vnějšího obrysu (implicitně v pixelech)
`rules`	předepisuje vzhled tabulkové mřížky (oddělujících čar uvnitř tabulky) `none` žádné čáry `basic` vodorovné čárky mezi skupinami (THEAD, TFOOT, TBODY) `rows` čáry mezi řádky `cols` čáry mezi sloupci `all` všechny čáry (implicitní hodnota)
`cellspacing`	nastavuje velikost mezery mezi jednotlivými buňkami tabulky
`cellpadding`	nastavuje velikost mezi okrajem buňky tabulky a jejím obsahem
`clear`	specifikuje způsob obtékání tabulky `left` obtékány budou obrázky umístěné vlevo `right` obtékány budou obrázky umístěné vpravo `all` pokračuje se až pod všemi obrázky
`noflow`	zákaz plovoucího textu v tabulce (rozšíření Netscape)
`nowrap`	způsob zalamování textu uvnitř buňek tabulky
`units`	specifikuje další volby pro atribut `colspec` `en` v počtu písmen "n" `relative` relativní šířka sloupce `pixels` šířka v pixelech (implicitní hodnota)

<CAPTION align=[top | bottom | left | right]>

...nadpis_tabulky...

</CAPTION>

párová značka specifikující nadpis tabulky nebo obrázku

align určuje pozici nadpisu vůči vnějším okrajům tabulky
top nahoře uprostřed (implicitní hodnota)
bottom dole uprostřed
left vlevo
right vpravo

...posloupnost tabulkových polí...

</TR>

párová značka specifikující tabulkový řádek v jedné ze tří sekcí (THEAD, TFOOT a TBODY); musí obsahovat nejméně jeden prvek TH nebo TD; koncová značka je nepovinná

`align`	určuje způsob zarovnávání textu `left` zarovnávání vlevo (implicitní) `right` zarovnávání vpravo `center` centrování na střed `justify` zarovnávání obou okrajů (pokud je to možné) `char` zarovnání na znak (typicky desetinná čárka)
`char`	znak, na který se vztahuje zarovnání vyžádané atributem `align=char` (implicitně desetinná čárka podle národního nastavení)
`charoff`	specifikuje v pixelech offset pro první výskyt znaku `char` na každém řádku; implicitní hodnota je 50%
`valign`	definuje implicitní způsob vertikálního zarovnání obsahu buňek pro tento řádek `top` zarovnání k hornímu okraji buňky `middle` zarovnání doprostřed buňky (standardní hodnota) `bottom` zarovnání k dolnímu okraji buňky `baseline` totéž jako `bottom` (rozšíření Netscape)

...obsah pole...

</TD>

párová značka specifikující běžnou buňku; koncová značka </TD> je nepovinná

`align`	určuje způsob zarovnávání textu `left` zarovnávání vlevo (implicitní) `right` zarovnávání vpravo `center` centrování na střed `justify` zarovnávání obou okrajů (pokud je to možné) `char` zarovnání na znak (typicky desetinná čárka)
`char`	znak, na který se vztahuje zarovnání vyžádané atributem `align=char` (implicitně desetinná čárka podle národního nastavení)
`charoff`	specifikuje v pixelech offset pro první výskyt znaku `char` na každém řádku; implicitní hodnota je 50%
`valign`	definuje implicitní způsob vertikálního zarovnání obsahu buňek pro tento řádek `top` zarovnání k hornímu okraji buňky `middle` zarovnání doprostřed buňky (standardní hodnota) `bottom` zarovnání k dolnímu okraji buňky `baseline` totéž jako `bottom` (rozšíření Netscape)
`nowrap`	potlačuje automatické dělení řádků uvnitř buňky
`bgcolor`	barva pozadí
`width`	určuje požadovanou šířku tabulky
`colspan`	počet sloupců, které mají být sloučeny do jednoho; vlastně prodlužuje buňku doprava přes n sloupců
`rowspan`	počet řádků, které mají být sloučeny do jednoho; vlastně prodlužuje buňku dolů přes n řádků
`axis`	umožňuje specifikovat návěští buňky (např. jako název databázového pole); chybí-li, použije se obsah buňky
`axes`	seznam axis návěští oddělených čárkou, která dohromady identifikují názvy polí řádku a sloupce obsahujících buňku

...obsah pole...

</TH>

párová značka označující hlavičku sloupce nebo řádku; zpravidla je vzhledově odlišena od ostatních buňek; atributy má totožné jako značka <TD>

Parametry tabulek

Pomocí atributů COLSPAN a ROWSPAN lze docílit sjednocení několika sousedních buňek tabulky ve vodorovném (svislém) směru. Tímto způsobem lze jednoduše docílit zpřehlednění tabulky.

Spojování buněk tabulky:

<TABLE BORDER>
<CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
<TR>
<TH><PRE> </PRE></TH> <TH>Ascii</TH>
<TH>Latin2</TH> <TH>Kamenik</TH>
</TR>
<TR>
<TD>Windows</TD> <TD ROWSPAN=2>html_a.zip</TD>
<TD>html_wl2.zip</TD> <TD>html_wk.zip</TD>
</TR>
<TR>
<TD>Unix</TD>
<TD>html_ul2.tgz</TD> <TD>html_uk.tgz</TD>
</TR>
</TABLE>

Zobrazení:

Specifikace jmen souborů Výuky HTML
	Ascii	Latin2	Kamenik
Windows	html_a.zip	html_wl2.zip	html_wk.zip
Unix	html_a.zip	html_ul2.tgz	html_uk.tgz

Poznámka: Obdobným způsobem lze za pomoci atributu COLSPAN spojit dvě políčka ve vodorovném směru.

U příkazu TABLE slouží jeho atribut WIDTH k určení šířky tabulky. Velikost lze zadávat i relativně, tedy např. WIDTH=100% způsobí vykreslení tabulky přes celou šíři okna prohlížeče.

Použití tabulek

V současné době se tabulkových příkazů používá většinou nikoliv k zarovnávání číselných hodnot, ale k celkové úpravě HTML stránky. Například lze do několika sloupečků tabulky umístit obrázky, které budou na stránce pravidelně rozmístěny nezávisle na šířce okna prohlížeče.

Jako další příklad mohou sloužit všechny lekce výuky jazyka HTML, které jsou zpracovány jako vycentrované tabulky o šířce 500 pixelů.

Tabulkami je možné výrazně zpřehlednit i formuláře. Zaškrtávací políčka lze umístit do jedné buňky tabulky, zatímco jejich popis bude ve vedlejším sloupečku.

Příklad (nejprve bez tabulky):

<FORM>
<CENTER>
<FONT SIZE=+2><B>Anketa</B></FONT>
</CENTER>
Jméno a příjmení <INPUT NAME="jmeno" SIZE=30><BR>
Bydliště <INPUT NAME="adresa" SIZE=30><BR>
Vlastním:<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV" CHECKED> Televizor<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
</FORM>

Nyní s použitím tabulek:

<FORM>
<CENTER>
<TABLE>
<TR>
<TD ALIGN=center COLSPAN=2>
<FONT SIZE=+2><B>Anketa</B></FONT></TD>
</TR>
<TR>
<TD>Jméno a příjmení</TD>
<TD><INPUT NAME="jmeno" SIZE=30></TD>
</TR>
<TR>
<TD>Bydliště</TD>
<TD><INPUT NAME="adresa" SIZE=30></TD>
</TR>
<TR>
<TD VALIGN=top ALIGN=right>Vlastním:</TD>
<TD><INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV" CHECKED> Televizor<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu</TD>
<TR>
</TABLE>
</CENTER>
</FORM>

Zobrazení: