6. Tabulky

Použití tabulek je v HTML velice rozšířené – od jednoduchých tabulek až po vícesloupcovou sazbu celého dokumentu. Pro uživatele je však prioritní jednoduchost, s jakou může danou tabulku vytvořit. Proto se při práci s tabulkami používá pouze šest značek:

<TABLE> – ohraničuje tabulku a definuje její vlastnosti,
<TR> – definuje řádky tabulky,
<TD> – definuje jednotlivé buňky tabulky,
<TH> – definuje hlavičku tabulky (zobrazenou zvýrazněně),
<COLGROUP> – slouží k formátování celých sloupců,
<CAPTION> – definuje název tabulky.

Dříve, než si formou příkladů ukážeme práci s tabulkami, si popišme detailně atributy jednotlivých značek.

Značka <TABLE>

Párová značka <TABLE> slouží k ohraničení celé tabulky a definuje její vlastnosti formou atributů. Následuje seznam atributů této značky, které slouží k definování vlastností tabulky.

align: Definuje zarovnání tabulky vzhledem ke stránce. Možné hodnoty jsou left, right a center pro zarovnání doleva, doprava a na střed stránky.
background: Pozadí celé tabulky bude vyplněno uvedeným obrázkem.
bgcolor: Definuje barvu pozadí celé tabulky – buď hexadecimálním vyjádřením barvy v modelu RGB nebo jejím jménem.
border: Určuje tloušťku stínovaného rámečku tabulky v pixelech. Není-li atribut uveden, není tabulka orámována.
bordercolor: Určuje barvu rámečku, která se použije pouze na dvě přilehlé strany rámečku z důvodu zachování prostorového efektu.
bordercolordark: Určuje barvu tmavší části rámečku.
bordercolorlight: Určuje barvu světlejší části rámečku.
cellpadding: Určuje vzdálenost v pixelech mezi okrajem buňky a jejím obsahem, implicitní hodnota je 1.
cellspacing: Určuje vzdálenost mezi jednotlivými buňkami tabulky, implicitní hodnota je 2.
cols: Určuje počet sloupců tabulky. Přestože je počet sloupců zřejmý z definice tabulky, bývá vhodné z důvodu rychlejšího vykreslení tabulky jej uvádět.
frame: Určuje vzhled vnějšího rámečku tabulky. Možné hodnoty jsou void (žádný rámeček), above (pouze nad horním okrajem tabulky), below (pouze pod dolním okrajem tabulky), hsides (nad a pod tabulkou), vsides (vlevo a vpravo od tabulky), lhs (pouze vlevo od tabulky) a rhs (pouze vpravo od tabulky).
rules: Specifikuje, které vnitřní rámečky tabulky se zobrazí. Možné hodnoty jsou none (žádné vnitřní rámečky), basic (zobrazí vodorovné linky mezi hlavičkou, tělem a patičkou tabulky), rows(mezi všemi řádky), cols (mezi všemi sloupci) a all (všechny vnitřní rámečky).
valign: Určuje svislé zarovnání textu v políčkách buňky, které je aplikováno na všechny buňky tabulky, není-li v nich uvedeno jinak. Implicitní zarovnání je na střed, pro zarovnání na vrch buňky použijeme hodnotu top a na spodek buňky hodnotu bottom.
width: Specifikuje šířku tabulky buď v pixelech nebo v procentech velikosti okna.

Značka <TR>

Značka <TR> (table row) slouží k vytváření jednotlivých řádků tabulky. Značka <TR> se může používat buď jako párová, nebo jako nepárová. V rámci jednoho dokumentu bychom se však měli držet pouze jedné z těchto možností. Následuje seznam atributů této značky.

align: Určuje vodorovné zarovnání textu v buňkách celého řádku. Implicitní hodnota je na levý okraj.
valign: Určuje svislé zarovnání textu v buňkách celého řádku.
bgcolor: Určuje barvu pozadí řádku.
bordercolor: Určuje barvu rámečku.
bordercolordark: Určuje barvu tmavší části rámečku.
bordercolorlight: Určuje barvu světlejší části rámečku.
nowrap: Text tabulky se nebude zalamovat v řádcích a tabulka se roztáhne i za hranice okna. Nesmí však být specifikován atribut width značky <TABLE>.

Značka <TD>

Značka <TD> (table data) slouží k definování jednotlivých buněk tabulky. Atributy této značky mají nejvyšší prioritu. Pokud máme např. nastavenu barvu pozadí pro celý řádek příslušným atributem značky <TR>, pro danou buňku se upřednostní barva pozadí definovaná atributem značky <TD>. Tedy atributy značky <TD> jsou nadřazeny atributům značky <TR> a ty jsou nadřazeny atributům značky <TABLE>. Stejně jako značka <TR> se může používat jako párová i jako nepárová. Dříve než přistoupíme k vytváření tabulek, uveďme si seznam atributů této značky.

align: Určuje vodorovné zarovnání textu v buňce.
background: Specifikuje obrázek, který bude tvořit pozadí buňky.
bgcolor: Určuje barvu pozadí buňky.
bordercolor: Určuje barvu rámečku buňky.
bordercolordark: Určuje barvu tmavší části rámečku.
bordercolorlight: Určuje barvu světlejší části rámečku.
colspan: Slouží ke spojení vedle sebe ležících buněk v jednom řádku do skupiny odstraněním přepážek mezi nimi. Imlicitní hodnota je rovna jedné, je-li vyšší, pak se buňka rozkládá přes uvedený počet sloupců od aktuálního směrem doprava.
height: Určuje výšku buňky a tedy i celého řádku.
nowrap: Text buňky se nebude zalamovat.
rowspan: Umožňuje spojit nad sebou ležící buňky v jednom sloupci do skupiny. Buňka se pak rozkládá od aktuální buňky směrem dolů přes uvedený počet řádků.
valign: Určuje svislé zarovnávání textu v buňce.
width: Určuje šířku buňky a tedy i celého sloupce.

Doporučení

Pokud není atribut border značky <TABLE> uveden, není tabulka orámována. Proto se při tvorbě tabulky (i neorámované) doporučuje nejprve rámeček zobrazit. Jen tak totiž většinou poznáme, zda je tabulka navržena správně, zda někde nějaké buňky nechybí, či naopak nepřebývají. Máme-li návrh tabulky hotov a tabulka nemá být orámována, atribut border nakonec odstraníme.

Příklad 6.1

<TABLE border="1">
  <TR>
    <TD>Text 1
    <TD>Text 2
    <TD>Text 3
  <TR>
    <TD>Text 4
    <TD>Text 5
    <TD>Text 6
</TABLE>

Text 1	Text 2	Text 3
Text 4	Text 5	Text 6

Příklad 6.2

<TABLE align="center" bgcolor="yellow" border="5" width="50%">
  <TR align="center">
    <TD>Text 1
    <TD bgcolor="white">Text 2
    <TD>Text 3
  <TR bgcolor="aqua">
    <TD align="left">Text 4
    <TD align="center">Text 5
    <TD align="right">Text 6
</TABLE>

Text 1	Text 2	Text 3
Text 4	Text 5	Text 6

Příklad 6.3

<TABLE border="1" height="100" width="50%">
  <TR align="center">
    <TD>Text 1
    <TD>Text 2
    <TD>Text 3
  <TR>
    <TD align="left" valign="top">Text 4
    <TD align="center" valign="middle">Text 5
    <TD align="right" valign="bottom">Text 6
</TABLE>

Text 1	Text 2	Text 3
Text 4	Text 5	Text 6

Příklad 6.4

<TABLE border="1" bordercolor="red" width="50%">
  <TR align="right">
    <TD>Text 1
    <TD>Text 2
    <TD>Text 3
    <TD>Text 4
    <TD>Text 5
  <TR align="center" bgcolor="lightblue">
    <TD colspan="2">Text 6
    <TD colspan="3">Text 7
</TABLE>

Text 1	Text 2	Text 3	Text 4	Text 5
Text 6		Text 7

Příklad 6.5

<TABLE border="1" bordercolor="black" cellspacing="0" cellpadding="10">
  <TR>
    <TD>Text 1
    <TD>Text 2
    <TD>Text 3
    <TD>Text 4
    <TD rowspan="3">Text 5
  <TR>
    <TD rowspan="2">Text 6
    <TD>Text 7
    <TD colspan="2">Text 8
  <TR>
    <TD colspan="2">Text 9
    <TD>Text 10
</TABLE>

Text 1	Text 2	Text 3	Text 4	Text 5
Text 6	Text 7	Text 8
	Text 9		Text 10

Příklad 6.6

Tabulky se velice často používají pro vícesloupcovou sazbu dokumentu. Obsahem buněk tabulky mohou být i obrázky a další prvky.

<TABLE bgcolor="white" border="1" cellspacing="0" cellpadding="10">
  <TR bgcolor="yellow" align="center">
    <TD colspan="3"><FONT size="7" color="blue">PERNŠTEJN</FONT>
  <TR bgcolor="lightblue">
    <TD><IMG src="pernstejn1.jpg">
    <TD valign="top">
      Hrad Pernštejn, skrytý v lesích východního okraje Českomoravské
      vrchoviny, patří k nejvýznamnějším a nejkrásnějším moravským hradům.
      Od poloviny 13. století byl sídlem rodu pánů z Pernštejna, který dlouhá
      staletí hrál důležitou roli v politickém dění českého království.
    <TD><IMG src="pernstejn2.jpg">
</TABLE>

PERNŠTEJN
	Hrad Pernštejn, skrytý v lesích východního okraje Českomoravské vrchoviny, patří k nejvýznamnějším a nejkrásnějším moravským hradům. Od poloviny 13. století byl sídlem rodu pánů z Pernštejna, který dlouhá staletí hrál důležitou roli v politickém dění českého království.

Značka <TH>

Značka <TH> (table head) slouží k definování hlavičky tabulky. Uvádí se v definici prvního řádku tabulky. Text hlavičky se zobrazí tučně a v každé buňce je vycentrován. Jinak má značka <TH> stejné atributy jako značka <TD>.

Příklad 6.7

<TABLE border="1" width="50%">
  <TR>
    <TH>Hlavička 1
    <TH>Hlavička 2
    <TH>Hlavička 3
  <TR>
    <TD>Text 1
    <TD>Text 2
    <TD>Text 3
  <TR>
    <TD>Text 4
    <TD>Text 5
    <TD>Text 6
</TABLE>

Hlavička 1	Hlavička 2	Hlavička 3
Text 1	Text 2	Text 3
Text 4	Text 5	Text 6

Značka <COLGROUP>

Formát jednotlivých řádků nám určují atributy značky <TR>. Zatím však nemáme žádný prostředek, který by umožňoval specifikovat formát buněk celého sloupce. K tomu nám slouží značka <COLGROUP>, s jejímž využitím můžeme např. zarovnat všechny buňky daného sloupce na střed. Má čtyři atributy: align (s možnými hodnotami center, left a right), valign (s hodnotami middle, top a bottom), width (pro určení šířky sloupce) a span (specifikuje na kolik po sobě následujích sloupců se daná pravidla aplikují). Značka <COLGROUP> by měla být umístěna vně značky <TR>, nejlépe hned za <TABLE>, resp. <CAPTION>. Protože však jednotlivé sloupce tabulky nejsou číslovány, je použití značky <COLGROUP> trochu komplikované. Chceme-li např. zarovnat všechny buňky čtvrtého a pátého sloupce tabulky na střed, musíme zadat

  <COLGROUP>
  <COLGROUP>
  <COLGROUP>
  <COLGROUP align="center">
  <COLGROUP align="center">

nebo jednodušeji

  <COLGROUP span="3">
  <COLGROUP span="2" align="center">

Značka <CAPTION>

Párová značka <CAPTION> specifikuje nadpis tabulky. Je vhodné jej používat, i když nadpis tabulky můžeme zobrazit jako obyčejný text. Uvádí se za značku <TABLE>. Má dva parametry align (s možnými hodnotami center, left, right, top a bottom) a valign (s hodnotami top a bottom). Pokud žádný z atributů není uveden, je nadpis zobrazen nad tabulkou a je vzhledem k tabulce vycentrován. Z výše uvedeného je patrné, že jak atribut align, tak atribut valign umožňuje specifikovat umístění nadpisu nad či pod tabulkou. Většinou má hodnota atributu valign přednost. Obecně však platí, že atribut align by měl být použit pro formát ve vodorovném směru a atribut valign pro formát ve směru svislém.

Příklad 6.8

<TABLE border="1" cellpadding="10">
  <CAPTION>Nadpis tabulky</CAPTION>
  <TR>
    <TH>Hlavička 1
    <TH>Hlavička 2
    <TH>Hlavička 3
  <TR>
    <TD>Text 1
    <TD>Text 2
    <TD>Text 3
</TABLE>

Nadpis tabulky
Hlavička 1	Hlavička 2	Hlavička 3
Text 1	Text 2	Text 3

Na závěr zopakujme, že v některé literatuře jsou značky <TR> a <TD> uváděny jako párové. My je pro zjednodušení budeme používat jako nepárové. Ve specifikaci HTML 4.0 ještě navíc přibyly párové značky <THEAD>, <TBODY> a <TFOOT> sloužící k definování skupin hlavičky, těla a patičky tabulky. Navíc přibyly i některé další atributy, jejichž uvedení však přesahuje rámec tohoto kurzu.

Jak si vyzkoušet výše uvedené příklady?

Označte myší zdrojový text libovolné ukázky.
Vybraný text zkopírujte do clipboardu.
Klikněte myší do textového pole uvedeného níže a text sem z clipboardu vložte.
Zdrojový text můžete libovolně upravit.
Poté klikněte na tlačítko Ukázat. V okně náhledu se vám zobrazí dokument, jehož zdrojový text byl zapsán v textovém poli.
Pokud je třeba, aby se dokument otevřel v novém okně, stačí kliknout na tlačítko Ukázat v novém okně.
Tlačítkem Vybrat vše se označí veškerý text zapsaný v textovém poli.
Tlačítkem Smazat můžete obsah celého textového pole vymazat.

Náhled: