Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Č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

 

Stiahnuť

Stiahnuté 1231x (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
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn university Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Avatar
MiroslavP
Člen
Avatar
MiroslavP:25.7.2019 9:49

Diky;-)

 
Odpovedať
25.7.2019 9:49
Avatar
Pavel Suchý
Člen
Avatar
Pavel Suchý:2.10.2019 16:25

Ahojte, díky za tutoriály, jsou super ! Už jsem zvládnul návrh vlastních stránek.
Teď bych ale potřeboval pomoct s tabulkou. Potřeboval bych jí posunout v prostoru, nastavit velikost buněk a změnit ohraničení. Nemůžu na to přijít. A návod jsem taky nenašel :-).
Díky za rady.

 
Odpovedať
2.10.2019 16:25
Avatar
Odpovedá na Pavel Suchý
Jakub Podskalský:3.10.2019 19:26

Ahoj,
ke stylování elementů je už potřeba CSS. Jestli jsi se ještě nedostal ke stylování v tomto seriálu, tak si to první projdi a pak už bude dávat větší smysl začít budovat nějakou úhlednou stránku. :)
Tady pak najdeš veškeré styly konkrétně k tabulkám.
K pozicování slouží styl position, Ty všechny základy CSS máš ale i v tomto tutoriálu, což ti doporučuji nejprve projít, patří k tomu i syntax.

Pokud bys chtěl přecejen poradit s něčím konkrétním, můžeš mi zkusit napsat, s tímhle snad dokážu poradit bez problému. :)

 
Odpovedať
3.10.2019 19:26
Avatar
Pavel Suchý
Člen
Avatar
Odpovedá na Jakub Podskalský
Pavel Suchý:5.10.2019 12:29

Ahoj, díky za odpověď. Jsem u lekce 13, takže do CSS jsem už nahlédl. Díky za radu, vyzkouším se s tabulkou poprat podle poslaného návodu. :-)

 
Odpovedať
5.10.2019 12:29
Avatar
Pavel Suchý
Člen
Avatar
Odpovedá na Jakub Podskalský
Pavel Suchý:6.10.2019 12:39

Ahoj, díky za super typ na stylování tabulky. Už jsem vyřešil i posouvání v okně. Jde to obyčejným marginem, což jsem předtím zkoušel, ale špatně jsem definoval, kde se to má udělat :-) Tak jsem zase o něco chytřejší :-)

 
Odpovedať
6.10.2019 12:39
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Odpovedá na Pavel Suchý
Jakub Podskalský:6.10.2019 18:09

Nemáš zač. Tu stránku si doporučuji uložit. Je to taková knihovna pro web development a několik programovacích jazyků. A vše je tam podle mě vysvětlené velice jednoduše. Pokud se webu hodláš nadále věnovat, tak se tam určitě budeš někdy vracet. Anebo ti bude více vyhovovat její "konkurence" MDN, která je další webovou dokumentací vytvořenou od Mozilly. :)

Editované 6.10.2019 18:09
 
Odpovedať
6.10.2019 18:09
Avatar
Robertos Rigáň:28. apríla 13:36

ked som sa to učil na kurzoch tak som tomu moc nechapal , ale ty si to vysvetlil ako boh a hned mi je všetko jasné easy :) diky

Odpovedať
28. apríla 13:36
Ak miluješ svoju prácu , tak to nieje práca ale hobby
Avatar
Lukáš Navrátil:30. júla 3:52

Děkuji :)

 
Odpovedať
30. júla 3:52
Avatar
Gargamel380
Člen
Avatar
Gargamel380:3. augusta 13:27

Ahoj mám prosbu začínám se učit tvorbu webu používám k tomu adobe Dream. Začínám se učit HTML 5. Teď sem začal se styly css3 mám doma i knihu html5 css3. Základy HTML parkrat sem zkoušel, napdpis, atd, úprava a posouvání a další sem si teď oblíbil v css3. Mám se tedy znova projít učit HTML zdali nějaké cody využiji ale hodně se jich změnilo příchodem htm5,tak nevim, pak bych se chtěl pustit do jawa skript, postupně.ci by jste poradily dikes

 
Odpovedať
3. augusta 13:27
Avatar
Michael Last
Člen
Avatar
Michael Last:8. augusta 12:48

Poděkování autorovi za výborný tutorial.Vše krásně popsané.děkuji.a když to nejde tak se podívám a a pak to zkouším znova.je to také o trpělivosti a zkoušení.

Odpovedať
8. augusta 12:48
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!