5. diel - Tabuľky v HTML
V predchádzajúcom cvičení, Riešené úlohy k 1.-4. lekcii 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 použí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 Visual Studio Code si
vytvorme nový HTML súbor table.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>
Štruktúru tak 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>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 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 štýlovaniu 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ť štýlovaniu.
Riadky tabuľky <tr>
Každý riadok tabuľky uzavrieme do párového tagu <tr>
(ako table row – riadok tabuľky).
Bunky tabuľky <td>
Jednotlivé bunky sú potom v riadku obalené opäť párovým tagom
<td> (ako table 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
table head). 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 table
head).
Telo tabuľky <tbody>
Telo tabuľky, čo je časť tabuľky bez hlavičky, potom obalíme do tagu
<tbody> (ako table body).
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íklad 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ám 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 priečinka
images/, ktorý bude v priečinku s našou stránkou
table.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>Preview</th> <th>Type</th> <th>Processor</th> <th>Graphic card</th> <th>In stock</th> </tr> </thead> <tbody> <tr> <td><img src="images/nb1.png" alt="Laptop"></td> <td>AB8AC9</td> <td>Intel Atom</td> <td>Nvidia</td> <td>Yes</td> </tr> <tr> <td><img src="images/nb2.png" alt="Laptop"></td> <td>GS8DGF</td> <td>AMD</td> <td>ATI</td> <td>Yes</td> </tr> <tr> <td><img src="images/nb3.png" alt="Laptop"></td> <td>KG1862A</td> <td>Unspecified</td> <td>Unspecified</td> <td>No</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
Ak budeme zlučovať stĺpce v nejakom riadku, zapíšeme
bunku len raz a dáme jej 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 "Unspecified" 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="images/nb3.png" alt="Laptop"></td> <td>KG1862A</td> <td colspan="2">Unspecified</td> <td>No</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 "Yes". 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="images/nb1.png" alt="Laptop"></td> <td>AB8AC9</td> <td>Intel Atom</td> <td>Nvidia</td> <td rowspan="2">Yes</td> </tr> <tr> <td><img src="images/nb2.png" alt="Laptop"></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 štýluje 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ť. V súčasnosti sa na všetko používa štýlovací jazyk CSS, ktorý si čoskoro uvedieme.
Sémantika v HTML
Už sme si spomenuli, že tabuľky by sa 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ť, veď predsa by sme zarovnali č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>. Oba
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é 162x (17.41 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.