HTML Učebnice - tabulky

Tabulky

Tabulka je jeden z nejmocnějších nástrojů HTML. Je možné je používat jak při prezentaci informací, tak pro přesnou kontrolu nad layoutem stránky. V této kapitole naleznete jen nejzákladnější informace o tabulkách. Pokud budete vytvářet složitější tabulky, přenechte práci html editorům.

Jednoduchá tabulka

Tabulky se vytvářejí pomocí tagu <TABLE>. Jednotlivé řádky se vkládají pomocí tagu <TR>. Řádky pak rozdělujeme do sloupců (buněk) pomocí <TD>.

<TABLE>

<TR>
  <TD>měsíc</TD>
  <TD>rok</TD>
</TR>

<TR>
  <TD>leden</TD>
  <TD>2001</TD>
</TR>

</TABLE>

Zarovnání buněk

Způsob zarovnání buněk můžeme měnit pomocí atributu ALIGN. Ten může nabývat hodnot : LEFT (Zarovnání vlevo), RIGHT (Zarovnání vpravo) a CENTER (vycentrování). Pokud chceme zarovnat celý řádek, můžeme atribut ALIGN použít i v tagu <TR>

<TABLE>

<TR>
<TD ALIGN=CENTER>měsíc</TD>
<TD ALIGN=LEFT>rok</TD>
</TR>

<TABLE>

Zcela shodně se používá atribut VALIGN, který slouží k vertikálnímu zarovnání. VALIGN může nabývat opět tří hodnot : TOP (obsah buňky se zarovná s horním okrajem buňky), BOTTOM (obsah buňky se zarovná se spodním okrajem buňky) a MIDDLE (obsah buňky se zarovná doprostřed). VALIGN i ALIGN můžeme použít jak u <TD>, tak u <TR>.

Velikost tabulky

Velikost tabulky můžeme určit ručně (natvrdo) a to pomocí atributu WIDTH a HEIGHT. WIDTH je šířka tabulky a HEIGHT je výška tabulky. Zadává se v pixelech. Pokud se ale obsah do tabulky nevejde, prostě se zvětší. Podobně můžeme zadávat velikost buněk <TD>. Pokud ovšem zadáte velikost tabulky, součet velikostí buněk se musí rovnat velikosti tabulky. Vše určitě pochopíte z následujícího příkladu :

<TABLE WIDTH=500 HEIGHT=200>

<TR>
<TD WIDTH=250 HEIGHT=100>rok</TD>
</TR>

<TR>
<TD WIDTH=250 HEIGHT=100>2001</TD>
</TR>

</TABLE>

Nastavení tabulky

Mezi atributy tagu TABLE patří CELLPADDING, pomocí kterého určíme vzdálenost obsahu buňky od okrajů buňky. Atribut CELLSPACING nastavuje mezeru mezi buňkami. Dále si můžeme pomocí atributu BORDER nastavit velikost rámečku okolo tabulky. Každé tabulce můžeme uvést její nadpis pomocí elementu CAPTION.

<TABLE CELLPADDING=5 CELLSPACING=5 BORDER=1>

<CAPTION>název</CAPTION>
<TR>
<TD>měsíc</TD>
<TD>rok</TD>
</TR>

<TABLE>