Jednoduché tabulky - Český HTML 5 manuál

Často se stává, že na stránkách potřebujeme tabulku. Tabulka nám umožňuje vkládat do jejích buněk elementy, které jsou potom hezky uspořádané. Narozdíl od odstavců, které se vždy skládají pod sebe, si můžeme text v tabulce skládat úhledně vedle sebe. V buňkách mohou být kromě textu samozřejmě i obrázky a další elementy. To se může hodit například k zobrazování nějakých výsledků, parametrů, statistik. Například na ITnetwork se tabulky mimo jiné využívají na výpis programů a lekcí.

<table>

Tabulka se označuje tagem <table> a obsahuje jednotlivé řádky. Tabulka má jediný atribut:

• border - Označuje šířku rámečku kolem buněk tabulky. Výchozí hodnota je 0 a bez uvedení nemá tabulka tedy žádný rámeček. Protože formátování se přesunulo do CSS, border má podle nového standardu HTML5 obsahovat pouze hodnoty "" (prázdná hodnota) nebo "1". Tím se odliší, zda tabulku používáme k pouhému rozvržení elementů na stránce (tzv. layout) nebo v ní máme opravdu nějaká data.

<tr>

Řádky vkládáme do tabulky pomocí tagu <tr> (jako Table Row = řádek tabulky). Řádek obsahuje jednotlivé buňky.

<td>

Buňky do řádku vkládáme tagem <td> (jako Table Data). Buňka může obsahovat text, obrázky a libovolné další elementy. Výchozí formátování je zarovnání vlevo.

Jednoduchá tabulka o 3 sloupích a 2 řádcích by mohla vypadat takto:

<table border="1">
    <tr>
        <td>První buňka</td>
        <td>Druhá buňka</td>
        <td>A třetí</td>
    </tr>
    <tr>
        <td>Začneme další řádek</td>
        <td>Druhá v druhém řádku</td>
        <td>Poslední buňka</td>
    </tr>
</table>

Výsledek:

<th>

Tag <tr> může kromě buněk (<td>) obsahovat také speciální hlavičkové buňky <th>. Ty se vkládají do prvního řádku tabulky a ten je poté chápán jako hlavička. Výchozí formátování je zarovnání na střed a tučné písmo. Tabulka s hlavičkou by mohla vypadat např. takto (přidali jsme i obrázky):

<table border="1">
    <tr>
        <th>Náhled</th>
        <th>Typ</th>
        <th>Procesor</th>
        <th>Graf. karta</th>
        <th>Skladem</th>
    </tr>
    <tr>
        <td><img src="images/notebook1.jpg" alt="Notebook" /></td>
        <td>ABC123</td>
        <td>Intel Atom</td>
        <td>Nvidia</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="images/notebook2.jpg" alt="Notebook" /></td>
        <td>WTF845</td>
        <td>AMD</td>
        <td>ATI</td>
        <td>Ano</td></tr>
    <tr>
        <td><img src="images/notebook3.jpg" alt="Notebook" /></td>
        <td>OMG666</td>
        <td>Neuvedeno</td>
        <td>Neuvedeno</td>
        <td>Ne</td>
    </tr>
</table>

Výsledek:

Atributy tagů <td> a <th>

colspan

Sousední buňky v tabulce můžeme slučovat. Pokud budeme slučovat buňky v řádku, zapíšeme buňku jen jednou a dáme ji atribut colspan. Ten bude mít hodnotu, kolik buněk propojuje. V tabulce uvedené výše se nabízí propojit buňky Neuvedeno v jednu. Hodnota colspan buňky bude tedy 2 (spojujeme 2 buňky v řádku) a druhou buňku smažeme. Kód by vypadal takto:

<table border="1">
  <tr>
        <th>Náhled</th>
        <th>Typ</th>
        <th>Procesor</th>
        <th>Graf. karta</th>
        <th>Skladem</th>
    </tr>
    <tr>
        <td><img src="images/notebook1.jpg" alt="Notebook" /></td>
        <td>ABC123</td>
        <td>Intel Atom</td>
        <td>Nvidia</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="images/notebook2.jpg" alt="Notebook"></td>
        <td>WTF845</td>
        <td>AMD</td>
        <td>ATI</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="images/notebook3.jpg" alt="Notebook" /></td>
        <td>OMG666</td>
        <td colspan="2">Neuvedeno</td>
        <td>Ne</td>
    </tr>
  </tbody>
</table>

A výsledek:

rowspan

Obdobně můžeme spojovat i buňky ve sloupci a to pomocí atributu rowspan, který udává, přes kolik řádků se spojuje. Udělejme si další ukázku:

<table border="1">
    <tr>
        <td rowspan="2">Sloupec s rowspan</td>
        <td>Druhý sloupec</td>
    </tr>
    <tr>
        <td>Druhý sloupec</td>
    </tr>
    <tr>
        <td>A nový řádek</td>
        <td>Již není ovlivněn</td>
    </tr>
</table>

Výsledek:

Stejně jako u colspan, i zde několik buněk vynecháme a ty jsou nahrazeny buňkou jednou s atributem rowspan. V druhém řádku jsme tedy vynechali 1. buňku, jelikož do ní zasahuje 1. buňka 1. řádku.

headers

Atribut udává hlavičky, kte kterým se buňka váže. Jeho hodnotou je seznam id hlaviček, oddělených mezerou. V prohlížečích se atribut nijak neprojeví, ale může mít význam u hlasových čteček.

scope

Narozdíl od výše uvedených atributů je scope pouze pro <th>. Tag určuje, zda se popisek v hlavičkové buňce vztahuje k sloupci nebo k řádku. Opět je jeho význam pouze pro hlasové čtečky.

Hodnoty:

• col - Hlavička patří sloupci
• row - Hlavička patří řádku
• colgroup - Hlavička patří více sloupcům
• rowgroup - Hlavička patří více řádkům

V minulosti se tabulky používaly pro tvorbu tzv. layoutu stránky (rozdělení stránky na odkazovou lištu, logo a obsah), a i když to u statických stránek prakticky lépe nejde, je to z významového hlediska nevhodné. Webová sémantika se zabývá významem jednotlivých elementů. Použití tabulky na rozvržení stránky je tedy nesémantické, protože i když se web vykreslí správně, tabulka má obsahovat nějaké hodnoty a ne celý webový obsah. Naštěstí se zjistilo, že zrovna toto na návštěvnost stránek nemá žádný vliv. Zkuste si vzpomenout na rozdíl mezi tagem <strong> a <b>. Oba vypadají stejně, ale zvýrazňovat text tagem <b> je nesémantické, protože tento tag nedává textu absolutně žádný vyšší význam, jen říká, že se má k vykreslení použít tučný font. Naopak <strong> říká: "Tento text je důležitý". Sémantika je to, co to znamená, ne to, jak to vypadá. Je velmi důležitá, protože sémantické webové stránky mají potom výhodu ve vyhledávačích a mají často vyšší návštěvnost.

Tabulky mají ještě několik dalších tagů, na ty bude vyčleněn samostatný článek.