IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

5. diel - Tabuľky v HTML

Predchádzajúci
Ďalší

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 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:

Simple table
file:///C:/User­s/David/OneDri­ve/first_web/ta­ble.html

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 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ás napadnúť, že ako existuje <th>, mohlo by existovať aj <tf>, ale nie je to tak.

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 images/, ktorá bude v zložke s našou stránkou table.html:

Notebook 1 - Webové stránky krok za krokom Notebook 2 - Webové stránky krok za krokom Notebook 3 - Webové stránky krok za krokom

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:

Simple table
file:///C:/User­s/David/OneDri­ve/first_web/ta­ble.html

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 "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:

Simple table
file:///C:/User­s/David/OneDri­ve/first_web/ta­ble.html

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:

Simple table
file:///C:/User­s/David/OneDri­ve/first_web/ta­ble.html

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é 33x (17.41 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Riešené úlohy k 1.-4. lekciu HTML a CSS
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Zoznamy v HTML a zopakovanie tabuľky
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
75 hlasov
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 sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity