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