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

Lekce 4 - Tabulky v HTML

V předešlém cvičení, Řešené úlohy k 1.-3. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

V dnešním HTML tutoriálu si ukážeme, jak se v HTML dělají tabulky a seznamy. Oboje jsou jakési kontejnery, do kterých se vkládají další elementy. Používáme je pro uspořádání těchto elementů, čímž dosáhneme přehlednosti a jednotného vzhledu.

Tabulky

Často se stává, že na stránkách potřebujeme tabulku. Tabulka nám umožňuje vkládat do jejích buněk elementy, které jsou potom hezky uspořádané. Na rozdíl od odstavců, které se vždy skládají pod sebe, si můžeme text v tabulce skládat úhledně vedle sebe. V buňkách mohou být kromě textu samozřejmě i obrázky a další elementy. To se může hodit například k zobrazování nějakých výsledků, parametrů nebo statistik. Například na ITnetwork se tabulky mimo jiné využívají na výpis programů a tutoriálů.

První tabulka

Vytvořme si první, jednoduchou tabulku. Založte si někde bokem nový HTML soubor, vyplňte doctype, hlavičku, však to už znáte :) Vytvořme si tabulku o 3 sloupcích a 2 řádcích. Hlavičku i patičku zatím 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ýsledek bude vypadat takto:

Tabulka v HTML

Tabulku uzavřeme mezi párový tag <table>. Každý řádek uzavřeme do párového tagu <tr> (jako table row = řádek tabulky). Jednotlivé buňky jsou poté v řádku obalené tagem <td> (jako table data).

Protože stylování webových stránek se budou věnovat samostatné díly, my si zde prozradíme pouze atribut border, který označuje tloušťku rámečku tabulky. Jako výchozí je 0, tedy vypnutý. Výše jsme ho nastavili na 1 pixel.

Tabulka s hlavičkou

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Tabulce můžeme dát i složitější strukturu a to podobnou, jakou má HTML stránka. Může obsahovat hlavičku v tagu <thead> a potom tělo v <tbody>. Hlavičkou tabulky se myslí první řádek, který popisuje, co hodnoty ve sloupcích znamenají.

Hlavičku můžeme také úplně vynechat a tělo poté nemusíme do tbody obalovat. Za thead může následovat podobně tfoot, obsahující patičku tabulky. V hlavičce píšeme také <tr>, ale místo <td> píšeme <th> (jako table header = nadpis tabulky).

Nejlépe vše pochopíme na další ukázce, vytvoříme si tabulku s několika notebooky a jejich parametry. Ikonky notebooků jsem pro vás připravil, stáhněte si je níže:

Notebook Notebook Notebook

Naši jednoduchou tabulku výše nyní přetvoříme na něco složitějšího, vložte místo ní kód níže:

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

HTML tutoriál – Tabulka s hlavičkou a tělem

Vidíme, že tabulka má hlavičku, text v hlavičce je tučný a centrovaný. Jinak zde není zatím nic nového.

Slučování buněk

Sousední buňky v tabulce můžeme slučovat. Pokud budeme slučovat buňky v řádku, zapíšeme buňku jen jednou a dáme ji atribut colspan. Ten bude mít hodnotu s číslem, kolik buněk propojuje. V tabulce uvedené výše se nabízí propojit buňky Neuvedeno v jednu. Hodnota colspan buňky bude tedy 2 (spojujeme 2 buňky v řádku) a druhou buňku smažeme. Kód posledního řádku tedy 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ýsledek:

HTML tutoriál – Tabulka – sloučení buněk v řádku

Obdobně můžeme spojovat i buňky ve sloupci a to pomocí atributu rowspan, který udává, přes kolik řádků se spojuje. Spojme ještě dvě buňky s textem "Ano". Jednu buňku opět vymažeme, té horní dáme atribut rowspan s hodnotou 2. První dva řádky budou tedy vypadat 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ýsledek:

HTML tutoriál – Tabulka – sloučení buněk ve sloupci

To je prozatím k tabulkám vše, kód dnešního tutoriálu opět ke stažení v příloze níže. Jak se text v tabulkách styluje a zarovnává a jak se buňkám nastavuje velikost si ukážeme později. Dříve se k tomu používaly speciální atributy, které jsou však nyní zastaralé a tak je zde nechci uvádět. Nově se pro vše používá stylovací jazyk CSS, který si brzy uvedeme.

V minulosti se tabulky používaly pro tvorbu tzv. layoutu stránky (rozdělení stránky na odkazovou lištu, logo a obsah), a i když to u statických stránek může zdát výhodné, je to z významového hlediska nevhodné. Zpočátku seriálu jsem nechtěl čtenáře mást cizími slovy, ale odteď budu používat slovo sémantika. Webová sémantika se zabývá významem jednotlivých elementů. Použití tabulky na rozvržení stránky je tedy nesémantické, protože i když se web vykreslí správně, tabulka má obsahovat nějaké hodnoty a ne celý webový obsah. Zkuste si vzpomenout na rozdíl mezi tagem <strong> a <b>. Oba vypadají stejně, ale zvýrazňovat text tagem <b> je nesémantické, protože tento tag nedává textu absolutně žádný vyšší význam, jen říká, že se má k vykreslení použít tučný font. Naopak <strong> říká: "Tento text je důležitý". Sémantika je to, co to znamená, ne to, jak to vypadá. Je velmi důležitá, protože sémantické webové stránky mají potom výhodu ve vyhledávačích a mají často vyšší návštěvnost.

Pro dnešní lekci to bude vše :)

V příští lekci, Seznamy v HTML a zopakování tabulky, si ukážeme seznamy a přidáme do našeho webu navigaci.


 

Stáhnout

Staženo 1243x (16.95 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 1.-3. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
110 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (5)

 

 

Komentáře
Zobrazit starší komentáře (60)

Avatar
Pavel Suchý
Člen
Avatar
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. :-)

 
Odpovědět
5.10.2019 12:29
Avatar
Pavel Suchý
Člen
Avatar
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ší :-)

 
Odpovědět
6.10.2019 12:39
Avatar
Odpovídá 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. :)

Editováno 6.10.2019 18:09
 
Odpovědět
6.10.2019 18:09
Avatar
Robertos Rigáň:28. dubna 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

Odpovědět
28. dubna 13:36
Ak miluješ svoju prácu , tak to nieje práca ale hobby
Avatar
Lukáš Navrátil:30. července 3:52

Děkuji :)

 
Odpovědět
30. července 3:52
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Gargamel380
Člen
Avatar
Gargamel380:3. srpna 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

 
Odpovědět
3. srpna 13:27
Avatar
Michael Last
Člen
Avatar
Michael Last:8. srpna 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í.

Odpovědět
8. srpna 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...
Avatar
Kristián Lörincz:29. srpna 18:55

Ahoj. Všiml jsem si, že u tagů "img" nemáte na konci lomítko a že to funguje. Je to v pořádku takto psát, nebo je to chyba? Předem díky za odpověď a každopádně díky za tento tutoriál!

 
Odpovědět
29. srpna 18:55
Avatar
Odpovídá na Kristián Lörincz
Kristián Lörincz:30. srpna 13:43

Tak právě jsem objevil, že jsou tu ještě starší komentáře, kde už to někdo zmiňoval :) Jako bych se neptal. Díky.

 
Odpovědět
30. srpna 13:43
Avatar
Michal Stisek:2. září 10:35

Opravdu je použití tagu

<b>

nesémantické? Co v případě, že chci vykreslit graficky text, který chci jen zvýraznit pro čtenáře a ne pro vyhledávače a navíc proto, že není důležitý... Například v tabulce s rozvrhem, kde chci zvýraznit Sobota, Neděle, jako dny víkendu. Pak si myslím, že zvýraznění textu za pomoci b vůbec nemůže být naškodu.

Editováno 2. září 10:37
Odpovědět
2. září 10:35
Jít pořád dál má smysl
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 70. Zobrazit vše