Lekce 6 - Jednoduché tabulky v HTML

V minulé lekci, Seznamy v HTML, jsme si ukázali tagy k tvorbě seznamu, mezi které patří <datalist>, <ul>, <li>, <ol>, <dd>, <dt>, <dl> a dále atributy reversed, start, type a value.

Č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é. Na rozdí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žívaly na výpis programů a lekcí. Z hlediska responzivity však tyto tabulky byly nahrazeny alternativou, tzv. grid systémem. Do teď však tabulka má využití (ačkoliv se to nezdá) například v kalendáři:

V administrační sekci taky můžeme vidět seznam článků v tabulce, avšak není to úplně nejideálnější:

<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 = data tabulky). 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 sloupcí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>
</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>

Stejně jako u colspan, i zde několik buněk vynecháme. Ty jsou poté 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, 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

Na rozdíl od výše uvedených atributů je scope pouze pro tag <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. Znáte 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 ještě nejsou zcela probrány, další tagy si proto necháme na příště.

V další lekci, Pokročilé tabulky v HTML, si ukážeme tagy k tvorbě pokročilých HTML5 tabulek jako <thead>, <thfoot>, <tbody>, <caption>, <colgroup> a <col>.