rychlokurs HTML

Tabulky

Tento oddíl popisuje tvorbu tabulek v rámci HTML dokumentu. Tabulka je, jak dá rozum, rozdělená do řádek a sloupců. Odstupy mezi řádky a sloupci, okraje, formátování dat v buňkách tabulky, to vše lze dále upravit. Ale pěkně postupně.


<table> definice tabulky

Všechny tabulky musí tímto příkazem začínat a končit musí příkazem </table>.

Základní schéma tabulky je:

    <table>
    <tr><th>
    <tr><td>
    </table>

Border= pixely
Tento atribut umožńuje vykreslení rámečku (okraje) kolem všech "chlívků" tabulky, v šíři udané v pixelech.

Align= left, right, center
Umístí tabulku na levé nebo pravé straně, či uprostřed okna.

Cellspacing= pixely
Určuje odstup mezi jednotlivými "chlívky" tabulky, odstup je udaný v pixelech.

Cellpadding= pixely
Určuje odstup mezi okrajem "chlívku" tabulky a jeho obsahem, opět údaj v pixelech.

Width= pixely, procenta
Umožňuje definovat šířku tabulky, buď v pixelech nebo procentech šíře okna.


<tr> řádka tabulky

Tento příkaz je nutný pro definování nové řádky tabulky.

Align= left, center, right
Určuje zarovnání textu v řádce buď k levém či pravému okraji "chlívku" nebo k jeho středu.

Valign= top, middle, bottom, baseline
Slouží k seskupení textu v řádce k vrcholu, středu či spodku "chlívku", a rovněž určuje, že všechny "chlívky" budou zobrazeny na shodné základně.


<td> data tabulky

Tento příkaz je nutný k definování položky ("chlívku") tabulky. Obsah dat tabulky musí být ukončen tagem </td>. Výjimkou je případ vložení tabulky do tabulky. Může používat všechny atributy jako u příkazu <tr> a dále tyto:

Width= pixely, procenta
Atribut určuje šířku "chlívku" buďto v pixelech nebo procentech okna.

Colspan= číslo
Slouží k definování počtu sloupců.

Rowspan= číslo
Slouží k definování počtu řádek.

Nowrap
Při použití tohoto atributu nebude text formátován tak, aby zachoval určenou šíři položky.


<th> záhlaví tabulky

Slouží k zvýraznění záhlaví tabulky. Dané záhlaví bude zobrazeno tučně a vystředěně. Tento příkaz může rovněž využít všechny atributy jako příkazy <tr> a <td>.


<caption> název tabulky

Příkaz určuje název tabulky a je umístěn mezi tagy <table>, ale nikoliv v řádce!

Align= top, bottom, left, right, center
Slouží k určení toho, zdali se název objeví zarovnán k levém či pravému okraji, nebo bude vystředěn. Rovněž lze tímto atributem alternativně určit umístění názvu na vrcholu nebo spodku tabulky.

Valign= top, bottom
Umísťuje název tabulky buď na vrchol nebo spodek tabulky, v případě, že je využíván atribut align.


<col> pouze pro MS Internet Explorer

Slouží k určení seskupení textu ve sloupcích tabulky. Pracuje stejně jako příkaz <tr>, ale místo řádky ovlivňuje sloupec položek.

Align= left, center, right
Určuje seskupení textu ve sloupci.

Span= číslo
Určuje počet sloupců, pro které platí atribut align.


<colgroup> pouze pro MS Internet Explorer

Slouží k seskupení textu ve sloupcích tabulky. Podobné příkazu <col>.

Align= left, center, right
Určuje seskupení textu ve sloupci.

Valign= baseline, bottom, middle, top
Určuje vertikální seskupení textu ve sloupci.

Span= číslo
Určuje počet sloupců, pro které platí atributy align a valign.


Příklad tabulky

V jednoduchém příkladu si můžete pohrát se šířkou a barvou rámečků nebo třeba šířkou a počtem řádků a sloupců:

    <center>
    <table border=1>
      <caption align=bottom>
      1997 – Tabulka
      </caption>
      <tr>
        <td>Položka 1.1</td>
        <td>Položka 1.2</td>
      </tr>
      <tr>
        <td>Položka 2.1</td>
        <td>Položka 2.2</td>
      </tr>
    </table>
    </center>

Takto tabulka vypadá:

1997 – Tabulka
Položka 1.1Položka 1.2
Položka 2.1Položka 2.2

-pa-