Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akce až 50 % zdarma při nákupu e-learningu. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Slevovy týden 3/50

4. diel - Tabuľky v HTML

V predchádzajúcom cvičení, Riešené úlohy k 1.-3. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 1.-3. lekciu HTML a CSS , sme sa naučili do stránok vkladať obrázky a odkazy. V dnešnom HTML tutoriále si ukážeme, ako sa v HTML robia tabuľky a zoznamy. Oboje sú akési kontajnery, do ktorých sa vkladajú ďalšie elementy. Používame ich pre usporiadanie týchto elementov, čím dosiahneme prehľadnosti a jednotného vzhľadu.

Tabuľky

Často sa stáva, že na stránkach potrebujeme tabuľku. Tabuľka nám umožňuje vkladať do jej buniek elementy, ktoré sú potom pekne usporiadané. Na rozdiel od odsekov, ktoré sa vždy skladajú pod seba, si môžeme text v tabuľke skladať úhľadne vedľa seba. V bunkách môžu byť okrem textu samozrejme aj obrázky a ďalšie elementy. To sa môže hodiť napríklad k zobrazovaniu nejakých výsledkov, parametrov alebo štatistík. Napríklad na ITnetwork sa tabuľky okrem iného využívajú na výpis programov a tutoriálov.

Prvá tabuľka

Vytvorme si prvú, jednoduchú tabuľku. Založte si niekde bokom nový HTML súbor, vyplňte doctype, hlavičku, však to už poznáte :) Vytvorme si tabuľku o 3 stĺpoch a 2 riadkoch. Hlavičku aj pätičku zatiaľ vynechá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ýsledok bude vyzerať takto:

Tabuľka v HTML
Tabuľku uzavrieme medzi párový tag
(ako table dáta).

Pretože štýlovanie webových stránok sa budú venovať samostatné diely, my si tu prezradíme iba atribút border, ktorý označuje hrúbku rámčeka tabuľky. Ako štandard je 0, teda vypnutý. Vyššie sme ho nastavili na 1 pixel.

Tabuľka s hlavičkou

Tabuľke môžeme dať aj zložitejšie štruktúru a to podobnú, akú má HTML stránka. Môže obsahovať hlavičku v tagu

 

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é 1871x (16.95 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.-3. 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 Čápka
Avatar
Užívateľské hodnotenie:
9 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 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