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í.

Lekce 5 - Tabulky v HTML

V předešlém cvičení, Řešené úlohy k 1.-4. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

V dnešním HTML tutoriálu si ukážeme, jak se dělají tabulky, které na našich stránkách budeme občas potřebovat. Určitě jste někdy v Excelu vytvářeli tabulku, např. na rozvrh hodin nebo jako přehled výdajů za novou kuchyň. Tabulky nám umožňují přehledně vypsat text nebo jiné HTML elementy do řádků a sloupců. Můžeme tak vytvořit např. katalog produktů nebo kontakty na lidi ve firmě. Například na ITnetwork se tabulky mimo jiné využívají na výpis programů a tutoriálů.

V dávné minulosti se tabulky dokonce používaly na rozvržení celé stránky. Dnes už jsou pro tyto účely ovšem lepší nástroje a používání tabulek omezujeme opravdu jen na případy, kdy chceme uživateli zobrazit přehledně nějaká data. Rozvržení elementů na stránce si ukážeme dále v kurzu.

Tabulka <table>

Vytvořme si první, jednoduchou HTML tabulku. Ve VS Code si vytvořme nový HTML soubor tabulka.html. HTML strukturu si můžeme nyní v novém prázdném souboru zkusit vygenerovat pomocí napsání ! a stisknutí klávesy Enter, jak jsme si již ukazovali. Výsledkem bude kód podobný tomuto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Přepíšeme atribut lang na hodnotu cs-cz a strukturu máme připravenou. Element <meta> s atributem viewport definuje styly pro mobilní zařízení a dostaneme se k němu až v navazujícím kurzu. Můžete jej v kódu ponechat, nijak nám nevadí.

Dále mezi <body> a </body> vložíme jednoduchou tabulku. Kód si hned vysvětlíme:

<table border="1">
    <tr>
        <td>Buňka 1</td>
        <td>Buňka 2</td>
        <td>Buňka 3</td>
    </tr>
    <tr>
        <td>Buňka 4</td>
        <td>Buňka 5</td>
        <td>Buňka 6</td>
    </tr>
</table>

Všimněte si opět přehledného odsazení kódu zleva podle zanoření elementů.

Soubor uložíme a otevřeme v prohlížeči. Výsledek bude vypadat takto:

Jednoduchá tabulka
file:///C:/User­s/David/OneDri­ve/prvni_web/ta­bulka.html

Tabulka

Celou tabulku jsme uzavřeli mezi párové tagy <table> a </table>.

Rámeček tabulky border

Protože stylování webových stránek se budou věnovat samostatné lekce, my si zde prozradíme pouze atribut border. Ten označuje tloušťku rámečku tabulky. Pokud jej neuvedeme, má hodnotu 0, tedy je vypnutý. Výše jsme ho nastavili na 1 pixel, abychom rámeček tabulky vůbec viděli. Změnu barvy a stylu rámečku si ukážeme až dále v kurzu, kdy se budeme věnovat stylování.

Řádky tabulky <tr>

Každý řádek tabulky uzavřeme do párového tagu <tr> (jako table row - řádek tabulky).

Buňky tabulky <td>

Jednotlivé buňky jsou poté v řádku obalené opět párovým tagem <td> (jako table data).

Tabulka s hlavičkou

Tabulka může mít navíc i hlavičkový řádek, případně patičku. Asi vás nepřekvapí, že pro to existují podobné tagy jako pro hlavičku a tělo HTML stránky. Celá tabulka bude opět v tagu <table>.

Hlavička <thead>

Hlavičkou tabulky se myslí první řádek <tr>, který popisuje, co hodnoty ve sloupcích znamenají. Obvykle je dobrý nápad takový řádek přidat, protože tabulka je potom přehlednější.

První řádek <tr> tabulky pak většinou obalujeme do párového elementu <thead> (jako table head). Toto obalení není povinné, ale zvyšuje přehlednost kódu tabulky.

Hlavičková buňka <th>

Když do řádku vkládáme buňky hlavičky, namísto <td> pro ně používáme tag <th> (jako table head).

Tělo tabulky <tbody>

Tělo tabulky, což je část tabulky bez hlavičky, potom obalíme do tagu <tbody> (jako table body). Ten opět slouží pro přehlednost a teoreticky jej můžeme vynechat, ovšem za cenu nepřehlednějšího kódu.

Patička tabulky <tfoot>

Za <tbody> může následovat podobně <tfoot>, obsahující patičku tabulky. Tam může být např. celkový součet, celkové hodnocení a další shrnující informace všech řádků tabulky. Do patičky pak vkládáme řádek <tr> a do něj běžné buňky <td>.

Mohlo by vás napadnout, že jako existuje <th>, mohlo by existovat i <tf>, ale není tomu tak.

Ukázka HTML tabulky s hlavičkou - Tabulka produktů

Nejlépe vše pochopíme na další ukázce. Vytvoříme si tabulku s několika notebooky a jejich parametry. Ikonky notebooků jsem pro vás připravil, stáhněte si je níže a uložte si je do složky obrazky/, která bude ve složce s naší stránkou tabulka.html:

Notebook - Webové stránky krok za krokem Notebook - Webové stránky krok za krokem Notebook - Webové stránky krok za krokem

Naši jednoduchou tabulku výše nyní přetvoříme na pokročilejší, vložte místo ní kód níže:

<table border="1">
  <thead>
    <tr>
        <th>Náhled</th>
        <th>Typ</th>
        <th>Procesor</th>
        <th>Graf. karta</th>
        <th>Skladem</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td><img src="obrazky/nb1.png" alt="Notebook"></td>
        <td>AB8AC9</td>
        <td>Intel Atom</td>
        <td>Nvidia</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="obrazky/nb2.png" alt="Notebook"></td>
        <td>GS8DGF</td>
        <td>AMD</td>
        <td>ATI</td>
        <td>Ano</td>
    </tr>
    <tr>
        <td><img src="obrazky/nb3.png" alt="Notebook"></td>
        <td>KG1862A</td>
        <td>Neuvedeno</td>
        <td>Neuvedeno</td>
        <td>Ne</td>
    </tr>
  </tbody>
</table>

Výsledek:

Jednoduchá tabulka
file:///C:/User­s/David/OneDri­ve/prvni_web/ta­bulka.html

Vidíme, že tabulka má hlavičku. Text v hlavičce je tučný a centrovaný. Jinak zde není zatím nic nového.

Slučování buněk tabulky

Sousední buňky v tabulce můžeme slučovat podobně jako v již zmíněném Excelu.

Sloučení buněk vodorovně - colspan

Pokud budeme slučovat sloupce v nějakém řádku, zapíšeme buňku jen jednou a dáme ji atribut colspan (jako column span - rozpětí sloupců). Ten bude mít hodnotu s číslem, kolik buněk propojuje.

V tabulce, kterou jsme si vytvořili výše, se nabízí propojit buňky s textem "Neuvedeno" v jednu. Hodnota colspan buňky bude tedy 2 (spojujeme 2 buňky v řádku). Druhou buňku z HTML kódu úplně smažeme. Kód posledního řádku tedy upravíme takto:

<tr>
    <td><img src="obrazky/nb3.png" alt="Notebook"></td>
    <td>KG1862A</td>
    <td colspan="2">Neuvedeno</td>
    <td>Ne</td>
</tr>

A výsledek:

Jednoduchá tabulka
file:///C:/User­s/David/OneDri­ve/prvni_web/ta­bulka.html

Sloučení buněk svisle - rowspan

Obdobně můžeme spojovat i řádky v nějakém sloupci a to pomocí atributu rowspan (row span - rozpětí řádků). Ten udává, přes kolik řádků se buňka roztáhne.

Spojme ještě dvě buňky s textem "Ano". Jednu buňku opět úplně vymažeme, té horní dáme atribut rowspan s hodnotou 2. První dva řádky budou tedy vypadat takto:

<tr>
    <td><img src="obrazky/nb1.png" alt="Notebook"></td>
    <td>AB8AC9</td>
    <td>Intel Atom</td>
    <td>Nvidia</td>
    <td rowspan="2">Ano</td>
</tr>
<tr>
    <td><img src="obrazky/nb2.png" alt="Notebook"></td>
    <td>GS8DGF</td>
    <td>AMD</td>
    <td>ATI</td>
</tr>

Výsledek:

Jednoduchá tabulka
file:///C:/User­s/David/OneDri­ve/prvni_web/ta­bulka.html

To je prozatím k tabulkám vše. Jak se text v tabulkách styluje a zarovnává a jak se buňkám nastavuje velikost si ukážeme později. Dříve se k tomu používaly speciální atributy, které jsou však nyní zastaralé a tak je zde nebudeme uvádět. Nově se pro vše používá stylovací jazyk CSS, který si brzy uvedeme.

Sémantika v HTML

Již jsme si zmínili, že by se tabulky neměly používaly pro tvorbu tzv. layoutu stránky (rozdělení stránky na navigační lištu, logo a obsah). I když by se toto využití tabulky mohlo nabízet, však hezky zarovnáme části stránky do sloupců a řádků, je to z významového hlediska nevhodné. Když hovoříme o významu jednotlivých elementů na stránce, používáme často pojem sémantika.

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. Zkuste si vzpomenout na rozdíl mezi tagy <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. Pokud vás toto téma zajímá, více se dozvíte v kurzu o SEO.

Pro dnešní lekci to bude vše :)

V příští lekci, Seznamy v HTML a zopakování tabulky, si ukážeme seznamy a přidáme do našeho webu navigaci.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 2514x (16.95 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 1.-4. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Seznamy v HTML a zopakování tabulky
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
2451 hlasů
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