5. diel - Tabuľky v HTML
V predchádzajúcom cvičení, Riešené úlohy k 1.-4. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
V dnešnom HTML tutoriále si ukážeme, ako sa robia tabuľky, ktoré na našich stránkach budeme občas potrebovať. Určite ste niekedy v Exceli vytvárali tabuľku, napr. na rozvrh hodín alebo ako prehľad výdavkov za novú kuchyňu. Tabuľky nám umožňujú prehľadne vypísať text alebo iné HTML elementy do riadkov a stĺpcov. Môžeme tak vytvoriť napr. katalóg produktov alebo kontakty na ľudí vo firme. Napríklad na ITnetwork sa tabuľky okrem iného využívajú na výpis programov a tutoriálov.
V dávnej minulosti sa tabuľky dokonca používali na rozvrhnutie celej stránky. Dnes už sú pre tieto účely však lepšie nástroje a používanie tabuliek obmedzujeme naozaj len na prípady, keď chceme užívateľovi zobraziť prehľadne nejaké dáta. Rozvrhnutie elementov na stránke si ukážeme ďalej v kurze.
Tabuľka <table>
Vytvorme si prvú, jednoduchú HTML tabuľku. Vo VS Code si vytvorme nový
HTML súbor tabulka.html. HTML štruktúru si môžeme teraz v
novom prázdnom súbore skúsiť vygenerovať pomocou napísania !
a stlačení klávesy Enter, ako sme si už ukazovali. Výsledkom
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>
Prepíšeme atribút lang na hodnotu cs-cz a
štruktúru máme pripravenú. Element <meta> s atribútom
viewport definuje štýly pre mobilné zariadenia a dostaneme sa k
nemu až v nadväzujúcom kurze. Môžete ho v kóde ponechať, nijako nám
nevadí.
Ďalej medzi <body> a </body> vložíme
jednoduchú tabuľku. Kód si hneď vysvetlí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šimnite si opäť prehľadné odsadenie kódu zľava podľa zanorenia elementov.
Súbor uložíme a otvoríme v prehliadači. Výsledok bude vyzerať takto:
Tabuľka
Celú tabuľku sme uzavreli medzi párové tagy <table> a
</table>.
Rámček tabuľky border
Pretože štylovaniu webových stránok sa budú venovať samostatné lekcie,
my si tu prezradíme iba atribút border. Ten
označuje hrúbku rámčeka tabuľky. Pokiaľ ho neuvedieme, má hodnotu
0, teda je vypnutý. Vyššie sme ho nastavili na 1
pixel, aby sme rámček tabuľky vôbec videli. Zmenu farby a štýlu rámčeka
si ukážeme až ďalej v kurze, kedy sa budeme venovať štylovaniu.
Riadky tabuľky <tr>
Každý riadok tabuľky uzavrieme do párového tagu <tr>
(ako t able r ow – riadok tabuľky).
Bunky tabuľky <td>
Jednotlivé bunky sú potom v riadku obalené opäť párovým tagom
<td> (ako t able data).
Tabuľka s hlavičkou
Tabuľka môže mať navyše aj hlavičkový riadok, prípadne pätičku. Asi
vás neprekvapí, že na to existujú podobné tagy ako pre hlavičku a telo
HTML stránky. Celá tabuľka bude opäť v tagu <table>.
Hlavička <thead>
Hlavičkou tabuľky sa myslí prvý riadok <tr>, ktorý
popisuje, čo hodnoty v stĺpcoch znamenajú. Obvykle je dobrý nápad takýto
riadok pridať, pretože tabuľka je potom prehľadnejšia.
Prvý riadok <tr> tabuľky potom väčšinou
obaľujeme do párového elementu <thead> (ako
t able h ead). Toto obalenie nie je povinné,
ale zvyšuje prehľadnosť kódu tabuľky.
Hlavičková bunka <th>
Keď do riadku vkladáme bunky hlavičky, namiesto <td>
pre ne používame tag <th> (ako t able
h ead).
Telo tabuľky <tbody>
Telo tabuľky, čo je časť tabuľky bez hlavičky, potom obalíme do tagu
<tbody> (ako t able b ody).
Ten opäť slúži na prehľadnosť a teoreticky ho môžeme vynechať, avšak
za cenu neprehľadnejšieho kódu.
Pätička tabuľky
<tfoot>
Za <tbody> môže nasledovať podobne
<tfoot>, obsahujúci pätičku tabuľky. Tam môže
byť napr. celkový súčet, celkové hodnotenie a ďalšie zhrňujúce
informácie všetkých riadkov tabuľky. Do pätičky potom vkladáme riadok
<tr> a doň bežné bunky <td>.
Mohlo by vás napadnúť, že ako existuje
<th>, mohlo by existovať aj <tf>
Ukážka HTML tabuľky s hlavičkou - Tabuľka produktov
Najlepšie všetko pochopíme na ďalšej ukážke. Vytvoríme si tabuľku s
niekoľkými notebookmi a ich parametrami. Ikonky notebookov som pre vás
pripravil, stiahnite si ich nižšie a uložte si ich do zložky
obrazky/, ktorá bude v zložke s našou stránkou
tabulka.html:
Našu jednoduchú tabuľku vyššie teraz pretvoríme na pokročilejšiu, vložte namiesto nej kód nižšie:
<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ýsledok:
Vidíme, že tabuľka má hlavičku. Text v hlavičke je tučný a centrovaný. Inak tu nie je zatiaľ nič nové.
Zlučovanie buniek tabuľky
Susedné bunky v tabuľke môžeme zlučovať podobne ako v už spomínanom Exceli.
Zlúčenie buniek vodorovne -
colspan
Pokiaľ budeme zlučovať stĺpce v nejakom riadku,
zapíšeme bunku len raz a dáme ju atribút colspan (ako column
span - rozpätie stĺpcov). Ten bude mať hodnotu s číslom, koľko buniek
prepája.
V tabuľke, ktorú sme si vytvorili vyššie, sa ponúka prepojiť bunky s
textom "Neuvedené" do jednej. Hodnota colspan bunky bude teda 2
(spájame 2 bunky v riadku). Druhú bunku z HTML kódu úplne zmažeme. Kód
posledného riadku teda 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ýsledok:
Zlúčenie buniek zvisle -
rowspan
Obdobne môžeme spájať aj riadky v nejakom stĺpci a to
pomocou atribútu rowspan (row span – rozpätie riadkov). Ten
udáva, cez koľko riadkov sa bunka roztiahne.
Spojme ešte dve bunky s textom "Áno". Jednu bunku opäť úplne vymažeme,
tej hornej dáme atribút rowspan s hodnotou 2. Prvé
dva riadky budú teda vyzerať 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ýsledok:
To je zatiaľ k tabuľkám všetko. Ako sa text v tabuľkách štyluje a zarovnáva a ako sa bunkám nastavuje veľkosť si ukážeme neskôr. Predtým sa na to používali špeciálne atribúty, ktoré sú však teraz zastarané a tak ich tu nebudeme uvádzať. Novo sa pre všetko používa štylovací jazyk CSS, ktorý si čoskoro uvedieme.
Sémantika v HTML
Už sme si spomenuli, že by sa tabuľky nemali používať na tvorbu tzv. layoutu stránky (rozdelenie stránky na navigačnú lištu, logo a obsah). Aj keď by sa toto využitie tabuľky mohlo ponúkať, však pekne zarovnáme časti stránky do stĺpcov a riadkov, je to z významového hľadiska nevhodné. Keď hovoríme o význame jednotlivých elementov na stránke, používame často pojem sémantika.
Použitie tabuľky na rozloženie stránky je teda
nesémantické, pretože aj keď sa web vykreslí správne, tabuľka
má obsahovať nejaké hodnoty a nie celý webový obsah. Skúste si spomenúť
na rozdiel medzi tagmi <strong> a <b>.
Obaja vyzerajú rovnako, ale zvýrazňovať text tagom <b> je
nesémantické, pretože tento tag nedáva textu absolútne žiadny vyšší
význam, len hovorí, že sa má na vykreslenie použiť tučný font. Naopak
<strong> hovorí: "Tento text je dôležitý!".
Sémantika je to, čo to znamená, nie to, ako to vyzerá. Je
veľmi dôležitá, pretože sémantické webové stránky majú potom výhodu
vo vyhľadávačoch a majú často vyššiu návštevnosť. Ak vás táto téma
zaujíma, viac sa dozviete v kurze o SEO.
Pre dnešnú lekciu to bude všetko:)
V budúcej lekcii, Zoznamy v HTML a zopakovanie tabuľky , si ukážeme zoznamy a pridáme do nášho webu navigáciu.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 2571x (16.95 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.