CELA OBRAZOVKA ZPET NA OBSAH



TABULKY.GIF


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
AsciiLatin2Kamenik
Windowshtml_wa.ziphtml_wl2.zip html_wk.zip
Unixhtml_ua.tgzhtml_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
 
AsciiLatin2Kamenik
Windowshtml_wa.ziphtml_wl2.zip html_wk.zip
Unixhtml_ua.tgzhtml_ul2.tgz html_uk.tgz



<TABLE width="šířka_tabulky" cols=počet_sloupců colspec=specifikace_sloupců align=[left | right | center | justify | bleedleft | bleedright] frame=[void | above | below | hsides | rhs | lhs | vsides | box | border] border=tloušťka_rámu rules=[none | basic | rows |cols |all] cellspacing="mezera_mezi_buňkami" cellpadding="mezera_uvnitř_buňky" clear=[left | right | all] noflow units=[en | relative | pixels] nowrap>
...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

<TR align=[left | center | right | justify | char] char="znak" charoff="offset_znaku" valign=[top | middle | bottom | baseline]>
...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)

<TD align=[left | center | right | justify | char] char="znak" charoff="offset_znaku" valign=[top | middle | bottom | baseline] nowrap bgcolor="barva" width="šířka" colspan=počet_sloučených_sloupců rowspan=počet_sloučených_řádků axis="návěští_buňky" axis="seznam_návěští_buňky">
...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

<TH align=[left | center | right | justify | char] char="znak" charoff="offset_znaku" valign=[top | middle | bottom | baseline] nowrap bgcolor="barva" width="šířka" colspan=počet_sloučených_sloupců rowspan=počet_sloučených_řádků axis="návěští_buňky" axis="seznam_návěští_buňky">
...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
 
AsciiLatin2Kamenik
Windowshtml_a.ziphtml_wl2.zip html_wk.zip
Unixhtml_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>

Anketa

Jméno a příjmení
Bydliště
Vlastním:
Televizor
Videorekordér
Hi-Fi soupravu

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

Anketa
Jméno a příjmení
Bydliště
Vlastním: Televizor
Videorekordér
Hi-Fi soupravu




CELA OBRAZOVKA ZPET NA OBSAH