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 ,
ale není tomu tak.<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