Tabulky II.

Dnes naše povídání o tabulkách ukončíme. Posledně jsme skončili u elementu CAPTION, kterým lze zadat nadpis tabulky. S tímto elementem lze použít atribut ALIGN a určit, zda nadpis bude nad tabulkou (ALIGN=TOP) nebo pod tabulkou (ALIGN=BOTTOM).

Již minule jsme použitím atributu BORDER dosáhli pěkně zarámované tabulky. Do tohoto atributu můžeme přiřadit hodnotu, která určuje šířku rámečku v pixelech. Při širším rámečku tabulka plasticky vystupuje nad okolní text stránky:

<TABLE BORDER="8">
  <CAPTION ALIGN=BOTTOM>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>

Připadá-li nám obsah buněk příliš namačkaný na mřížku tabulky, můžeme použít atribut CELLPADDING. Jeho hodnota určuje vzdálenost obsahu buňky od mřížky v pixelech.

<TABLE BORDER="8" CELLPADDING="5">
  <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>

Zvětšit lze i vzdálenost mezi jednotlivými buňkami a to pomocí atributu CELLSPACING:

<TABLE BORDER="8" CELLSPACING="10">
  <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>

Většina tabulek, které jsme si ukazovali, byly tabulky malé. Kdybychom je chtěli zvětšit, lze to nejjednodušeji provést pomocí atribut 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>

Obr. 1: Výsledek použití atributů ALIGN=CENTER a WIDTH="50%" u tabulky

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 ne příliš smysluplné ukázce:

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