HaTMatiLka
Lekce 6
Lekce Tabulky

Možná to někomu bude připadat divné, ale dle mého názoru je základem dobré stránky dobře formátovaná tabulka.

Původním účelem tabulek bylo — zobrazit tabulku. Obyčejnou tabulku s čísly a údaji, tak, jak jsme na ni zvyklí. (Před zavedením nového tagu musely být tabulky pouze jako obrázky.)

Nejmenší částí tabulky jest buňka (cell). Buňky, položené vedle sebe ve sloupcích (columns, cols) tvoří řádek (row). Několik řádků jest tabulkou (table). Záměrně tu uvádím tento složitý výklad, může se totiž hodit k pochopení tabulek v HaTMatiLce.

Každá tabulka je ohraničena párovým tagem <Table></Table>. Uvnitř se nachází řádky, uzavřené do <tr></tr>, složené z buněk <td></td>.
Text uvnitř
Nejjednodušší tabulka, složená z jediného řádku a jediného sloupce (jediná buňka) vypadá: <Table><tr><td> Text uvnitř </td></tr></Table>. (Příklad vpravo.)
Přestože se může zdát „jednobuněčná” tabulka nesmyslem, má jedno sqělé využití: může se do ní napsat článek, vložený do hlavního textu. Názorné využití tohoto principu viz lekce 3.

Příklad
                    
<Table border="1"> bordercolor="blue";
  <tr>
    <td>(1) Řádek 1, sl. 1</td>
    <td>(2) Řádek 1, sl. 2</td>
  </tr>
  <tr>
    <td>(3) Řádek 2, sl. 1</td>
    <td>(4) Řádek 2, sl. 2</td>
  </tr>
</Table>
(1) Řádek 1, sl. 1 (2) Řádek 1, sl. 2
(3) Řádek 2, sl. 1 (4) Řádek 2, sl. 2

Příklad ukazuje, že i tabulka má své paramtery. Kromě běžných width=nnheight=nn se používá ještě border=n, kterým nastavuje šířku obrysu (případně lze pomocí border=0 rámeček zrušit), bordercolor="RRGGBB" pro barvu rámečku a několik dalších, které teď nejsou potřeba.

Představit si tabulku jako posloupnost políček vyžaduje trošku cviku. Pro začátek navrhuji každou tabulku nejdříve načrtnout na papír, políčka očíslovat, zapsat jednotlivé buňky (každou uzavřít do <td></td>); pak najít místa, kde se oddělují řádky a označit je tagem <tr></tr>; nakonec celou tabulku uzavřít mezi <Table></Table>.

Tabulky v tabulkách

Jako u všech párových tagů, i tady si musí autor dávat zatraceně pozor, kde co začíná a kde končí. Zvláště, pokud se rozhodne umístit jednu tabulku do druhé. Například takto:

   
 
   
 ouplně
vevnitř
 
   
 
   
Dobré cvičení, že?

Zvětšená políčka

Další užitečnou vlastností jest přesah buněk. Řekněme, že je zapotřebí vyrobit tabulku s otvíracími hodinami nějakého obchodu. Otevřeno je dopoledne 8–12, odpoledne 13–18, v sobotu jen dopoledne a v pondělí až od devíti.

Takovou tabulku sice lze rozbít na několik tabulek, ale jednodušší je použít zvětšené buňky. Říká se tomu spanning a jde o případ, kdy je jedno políčko velké jako dvě buňky. Pokud jsou tyto buňky vedle sebe, použije se v <td> parametr colspan="2", pokud pod sebou, tak rowspan="2". Následující příklad ukazuje část takové tabulky. Též si všimněte parametrů v tagu <td>

Příklad
                    
<Table cellspacing="0" cellpadding="0" border="2" cellpadding="5">
  <tr>
    <th bgcolor="000000"> </th>
    <th bgcolor="0000FF" colspan="2">Dopoledne</th>
    <th bgcolor="0000FF" colspan="2">Odpoledne</th>
  </tr>
  <tr>
    <th bgcolor="0000FF">Den</th>
    <td bgcolor="0000FF" align="center">Od</td>
    <td bgcolor="0000FF" align="center">Do</td>
    <td bgcolor="0000FF" align="center">Od</td>
    <td bgcolor="0000FF" align="center">Do</td>
  </tr>
  <tr>
    <th bgcolor="0000FF">Po</th>
    <td align="center">9</td>
    <td align="center">12</td>
    <td align="center">13</td>
    <td align="center">18</td>
  </tr>

Tento příklad není ukončený. Prosím, prohlédněte si zdroj stránky, na niž vede odkaz (níže).
vokaž

Tabulky bývají použity k rozmanitým účelům. Nejčastěji jako neviditelný formátovací prvek, mající za úkol vyrobit zvláštní sloupec, nebo podobný efekt. Stačí zadat v úvodu tabulky border="0" a o existenci tabulky se dozvíte jen z neobvykle zalomeného textu.

Někdy je naopak tabulka zdůrazněna či zvýrazněna. Dva stručné příklady jsem připravil k této lekci:
Tabulka s kulatými okraji
vokaž
Tabulka vrhající stín
vokaž
I tohle je v tabulce.

O použití tabulek k formátování textu bude řeč příště.


Ostatně, všechen tento text jest schován v tabulce. Jak myslíte, že je vytvořen sloupec vpravo, s linky a odkazy?

Obsah
Lekce 1
Lekce 2
Lekce 3
Lekce 4
Lekce 5

tabulky
příklad
jedna v druhé
větší pole
příklad

Lekce 7
Lekce 8
Lekce 9
Lekce 10
Lekce 11
Lekce 12

 Lekce 7
© Robert R. Šimek, 1997