Tabulky

Tabulky jsou nejnáročnější strukturou v HTML. Už ze své podstaty, ke je třeba vyjádřit řádky a slouce se neobejdeme s jedním nebo dvěma vnořenými elementy. Nejlepším způsobem, jak si problematiku tabulek ukázat bude příklad, který si následně popíšeme.

Příklad základní tabulky (neorámovaná)
<table>
  <tr>
    <td>řádek 1 sloupec 1 </td>
    <td>řádek 1 sloupec 2 </td>
    <td>řádek 1 sloupec 3 </td>
  </tr>
  <tr>
    <td>řádek 2 sloupec 1 </td>
    <td>řádek 2 sloupec 2 </td>
    <td>řádek 2 sloupec 3 </td>
  </tr>
</table>

Celá tabulka jak je vidět je uzavřena do elementu <table> ve kterém jsou vnořeny elementy pro řádky <tr> [table row]. V každém řádku jsou pak elementy odkazující na sloupce, přesněji řečeno na buňky, nebo-li data. Z toho vyplývá i název elementu <td> [table data].

Všechny zmíněné elementy mají spoustu atributů, ale jejich podpora v prohlížečích je buď malá, nebo jsou nedoporučené a jejich vlastnosti budeme nastavovat pomocí CSS v další části semestru. Zmíním ale několik atributů, které jsou důležité, nebo využitelné.

Elemnt <td> může mít atribut colspan  s číslenou hodnotou, která udává, přes koli sloupců se buňka roztáhne. Standardně je přes jednu. Obdobnou funki má atribut rowspan, ale na řádky.

První řádek tabulky může být zvýrazněn a uveden jako záhlaví (hlavička). V takovém případě, se místo prvků td používají elementy th [table head]. Použití a atributy jsou u obou elementů stejné. Obsah prvků th bývý vystředěn a sázen tučným, případně větším písmem.

Element  table může obsahovat atribut border, označující sílu orámování buňěk v pixelech. Lze také orámovat celou tabulku a to atributem frame. Tan může obsahovat například hodnoty: "void"- bez rámečku, "border" všechny strany. Existují i varianty na orámovnání pouze nahoře či dole, nebo kombuinace.

Příklad složitější tabulky včetně orámovíní buňk i tabulky

<table frame="border" border="2">
<tbody>
<tr><th>První sloupec</th><th>Druhý sloupec</th><th>Třetí slopupec</th></tr>
<tr>
<td rowspan="2">řádek 1a 2, sloupec 1</td>
<td>řádek 1, sloupec 2</td>
<td>řádek 1, sloupec 3</td>
</tr>
<tr>
<td colspan="2">řádek 2, sloupec 2 a 3 zároveň</td>
</tr>
</tbody>
</table>

Naposledy změněno: Čtvrtek, 28. listopadu 2013, 13.11