
Specializovaný týdeník o výpočetní technice
o Internetu (CW 35/97)
Vytváříme si domovskou stránku
Tabulky II.
Jiří Kosek ml.
Dnes ukončíme naše povídání o tabulkách. Většina tabulek, které jsme si zatím ukazovali, byly tabulky malé. Kdybychom je chtěli zvětšit, lze to nejjednodušeji provést pomocí atributu WIDTH. Jím lze určit šířku tabulky a to buď v pixelech, nebo procentem jako poměrnou část obrazovky.
Umístění tabulky vzhledem k ostatnímu textu lze řídit atributem ALIGN. Pokud použijeme hodnotu LEFT nebo RIGHT, tabulka se umístí vlevo (resp. vpravo) a text kolem ní bude obtékat podobně jako u obrázků. Při použití ALIGN=CENTER bude tabulka uprostřed řádky a textem obtékána nebude. Na obrázku 1 si můžete prohlédnout výsledek následujícího HTML-kódu.
<TABLE BORDER="1" WIDTH="50%" ALIGN=CENTER>
<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>
Atributy použitelné s elementem TABLE jsme již vyčerpali. Zbývají nám atributy použitelné společně s jednotlivými buňkami tabulky (TD nebo TH). Z nich jsme již probrali atributy ALIGN, ROWSPAN a COLSPAN.
Kromě horizontálního způsobu zarovnání buňky (ALIGN) lze určit i vertikální způsob zarovnání textu v tabulce. Slouží k tomu atribut VALIGN a jeho hodnoty mohou být TOP, BOTTOM a MIDDLE. Použijeme-li TOP, bude obsah buňky zarovnán k hornímu okraji. Použití BOTTOM naopak způsobí zarovnání obsahu buňky s dolním okrajem buňky. Hodnota MIDDLE je standardní a způsobí, že obsah buňky bude vertikálně vycentrován.
Velikost tabulky se přizpůsobuje velikosti okna prohlížeče a může se tedy stát, že některé sloupce budou úzké a text v nich se bude zalamovat do více řádků. Pokud chceme tomuto zalamování zabránit, stačí u buňky uvést atribut NOWRAP. V tomto případě se šířka buňky upraví tak, aby se do ní vešel celý obsah.
Doporučenou šířku a výšku buňky lze zadat v pixelech pomocí atributů WIDTH a HEIGHT. Některé prohlížeče i zde akceptují procento, ale HTML 3.2 připouští pouze absolutní velikost v pixelech. Použití atributů si ukážeme na malé a nepříliš smysluplné ukázce (viz obrázek 2):
<TABLE BORDER="1">
<TR><TH HEIGHT="100">Rok</TH>
<TH VALIGN=BOTTOM NOWRAP>Obrat ze celou fabriku</TH>
<TR><TD WIDTH="200">1995</TD> <TD>2,6 mil</TD>
<TR><TD VALIGN=TOP>1996</TD> <TD HEIGHT="50">2,9 mil</TD>
<TR><TD>1997</TD> <TD>2,1 mil</TD>
</TABLE>
Jednotlivé buňky tabulky mohou obsahovat i několik odstavců textu, obrázky a klidně další vnořené tabulky. Kromě vytváření přehledných výstupů informací lze tabulky s výhodou použít i v případech, kdy chceme mít kontrolu nad výsledným layoutem stránky. Tento způsob využití tabulek si demonstrujeme na několika příkladech v některém z dalších pokračování našeho seriálu.
|