Kapitola XI. Tabulky
Existuje bezpočet případů, kdy využijete jeden ze složitějších a také mocných objektů na stránce tabulky. Možností, jaké tabulky vytvořit, a jaký jim dát vzhled je v současné verzi HTML jazyka hned několik.
Každá tabulka je celek uzavřený do párového příkazu <TABLE>. Jemu předáme nejdůležitější parametry, týkající se vzhledu celé tabulky. Prvním parametrem je BORDER (okraj); ten definuje šířku rámečku v bodech, pokud je "0" rámeček není zobrazen. Druhým je WIDTH, kterým se klasickým způsobem nastavuje šířka tabulky buď v bodech, nebo procentuálně z šířky okna (za číslem je znak "%"). Parametr ALIGN určuje, jak bude tabulka na stránce zobrazena hodnoty jsou tři: Left (vlevo), Right (vpravo) a Center (uprostřed okna).
Detailnější nastavení vzhledu umožňují ještě dva parametry CELLSPACING (velikost mezery mezi buňkami v tabulce) a CELLPADDING (velikost mezery mezi stěnou buňky a jejím obsahem).
Nově do HTML přibyla možnost definovat minimální výšku tabulky parametrem HEIGHT, a to opět procentuálním, nebo bodovým vyjádřením.
Nejzajímavější možnosti však skýtá parametr BGCOLOR, který dovoluje definovat barvu podkladu buněk v tabulce klasickým číselným nebo jmenným vyjádřením, jak bylo popsáno v šesté kapitole. Zde je tedy ukázka kompletního uvození tabulky, povinné nejsou žádné parametry:
<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=5 WIDTH="90%" HEIGHT="50" BGCOLOR="#FF8000">
Samotné vkládání buněk do tabulek je jednodušší, než byste možná čekali. Děje se tak pomocí dvou párových příkazů. Prvním z nich <TR> označíme každý nový řádek v tabulce a druhým <TD>, pak jednotlivé buňky na řádce. Příkaz <TR> obsahuje tři základní parametry společné pro každou řádku (je možné je potom měnit ještě na úrovni jednotlivých buněk). Těmi parametry jsou ALIGN (horizontální zarovnání LEFT, RIGHT nebo CENTER), VALIGN (vertikální zarovnání TOP, BOTTOM, CENTER a BASELINES) a BGCOLOR (barva podkladu). Pokud parametry nezadáte, budou použity standardní, nebo ty definované na celé řádce či v celé tabulce.
<TR ALIGN=LEFT VALIGN=TOP BGCOLOR="#008000">
Obsah jednotlivých buněk, jak již bylo řečeno, se uvozuje párovým příkazem <TD>. Ten umožňuje dalšími parametry měnit vlastnosti každého jednotlivého okénka nezávisle na zbytku tabulky. Pokud parametry nezadáte, budou použity standardní, nebo ty definované na celé řádce či v celé tabulce. Zde je kompletní výpis parametrů:
ALIGN (horizontální zarovnání LEFT, RIGHT nebo CENTER)
VALIGN (vertikální zarovnání TOP, BOTTOM, CENTER a BASELINES)
BGCOLOR (barva podkladu)
ROWSPAN (kolik řádků zahrnuje buňka na výšku)
COLSPAN (kolik sloupců zahrnuje na šířku)
WIDTH (šířka sloupce dané buňky v bodech nebo procentech z šířky tabulky)
NOWRAP (pokud je zadán, tak se text v tabulce nezalamuje)
HEIGHT (výška řádku buňky v bodech nebo procentech z výšky tabulky).
Povšimněte si zejména parametrů COLSPAN a ROWSPAN, které umožňují vytvářet i velmi složité tabulky, jejichž buňky jsou různě velké a navzájem se překrývají.
Kromě klasických řádek a buněk můžete v tabulce vytvářet také nadpis (bude zobrazen vycentrovaný nad tabulkou párový příkaz <CAPTION>) a záhlaví každého sloupce.
Záhlaví se definuje párovým příkazem <TH> a zahrnuje stejné parametry, jako každá jiná buňka, avšak text uvnitř je oproti běžným buňkám zvýrazněn. V tabulce také buňku nahrazuje.
Poznámka:
Buňka každé tabulky může obsahovat libovolný text, i formátovaný, obrázky a další objekty včetně tabulek. Velikost buněk nelze ovlivňovat přímo, neboť budou maximálně tak velké, aby se tam jejich obsah vešel.
(příště formuláře, aneb uživatelské rozhraní)
BEDŘICH SMETANA
7 0843
Výpis zdroje ukázkové stránky
<HTML>
<HEAD>
<TITLE>Kapitola XI.</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 CELLSPACING=3 CELLPADDING=5 WIDTH="90%" HEIGHT="50" BGCOLOR="#FF8000" >
<CAPTION><P>Toto je<BR>klasický nadpis tabulky.</P></CAPTION>
<TR>
<TH ALIGN=LEFT VALIGN=TOP WIDTH="10%" HEIGHT="10%" BGCOLOR="#0000FF">Záhlaví</TH>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ROWSPAN="2">5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
</TR>
<TR>
<TD>10</TD>
<TD>11</TD>
<TD COLSPAN="2" ROWSPAN="3">12</TD>
</TR>
<TR>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
</TR>
<TR>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
</TR>
</TABLE>
</BODY>
</HTML>