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:
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>
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:
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:
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:
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:
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 2750x (16.95 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.