Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Jednoduchá HTML tabulka - Tabulky - Český HTML 5 manuál

<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:

HTML tutoriál – Tabulka - Tabulky - Český HTML 5 manuál

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:

HTML tutoriál – Tabulka – sloučení buněk - Tabulky - Český HTML 5 manuál
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.

Jednoduchá HTML tabulka s rowspan - Tabulky - Český HTML 5 manuál
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.


 

Všechny články v sekci
Tabulky - Český HTML 5 manuál
Článek pro vás napsal David Hartinger
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity