Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akci až 30 % 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í.
discount 30 + hiring

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. Jsou to 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:

Jednoduchá tabulka
tabulka.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> (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> (table head) a potom tělo v <tbody> (table body). 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> (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:

Jednoduchá tabulka
tabulka.html

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:

Jednoduchá tabulka
tabulka.html

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:

Jednoduchá tabulka
tabulka.html

To je prozatím k tabulkám vše, kód dnešního tutoriálu naleznete 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.

Sémantika

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ž se 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 tagy <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. Pokud vás toto téma zajímá, více se dozvíte v kurzu o SEO.

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.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 1684x (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
Přeskočit článek
(nedoporučujeme)
Seznamy v HTML a zopakování tabulky
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
587 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

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

Avatar
Madaviriod Kokusekurac:7.1.2021 18:23

Prosím o pomoc. Prečo mi nezobrazuje obrázky na stránke ? Už som skúšal otvoriť to aj v inom prehliadači a nič nefunguje. Aj lokácia obrázku je dobre napísaná nechápem. Doteraz to išlo a zrazu nechce. Už som aj PSpad preinštaloval keby som náhodou nejaké nastavenia zmenil ale nič nepomáha.

 
Odpovědět
7.1.2021 18:23
Avatar
Dusan Fedor
Člen
Avatar
Dusan Fedor:15.4.2021 14:11

Nevím co vlastně hledám, směr kam se vybrat, no zatím to je velice fajn

 
Odpovědět
15.4.2021 14:11
Avatar
Ladislav Šafránek:2.12.2021 12:49

Zdravím, nějak jsem se tam ubouchl, chtěl jsem to udělat co změna, to tabulka, ale ty poslední dvě jsou bez ohraničení, viz screen.

`<!DOCTYPE html>

<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<title>Moje první webová stránka</title>
</head>

<body>
<table border="1">
<tr>
<td>Párový tag tr "rámuje" každý jeden řádek tabulky</td>
<td>Buňka 2</td>
<td>Buňka 3</td>
</tr>
<tr>
<td>Párový tag td definuje každý jeden "sektor"</td>
<td>Buňka 5</td>
<td>Buňka 6</td>
</tr>
</table>
<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="source/nb1­.png" alt="Notebook"></td>
<td>AB8AC9</td>
<td>Intel Atom</td>
<td>Nvidia</td>
<td>Ano</td>
</tr>
<tr>
<td><img src="source/nb2­.png" alt="Notebook"></td>
<td>GS8DGF</td>
<td>AMD</td>
<td>ATI</td>
<td>Ano</td>
</tr>
<tr>
<td><img src="source/nb3­.png" alt="Notebook"></td>
<td>KG1862A</td>
<td>Neuvedeno</td>
<td>Neuvedeno</td>
<td>Ne</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td><img src="source/nb1­.png" alt="Notebook"></td>
<td>AB8AC9</td>
<td>Intel Atom</td>
<td>Nvidia</td>
<td>Ano</td>
</tr>
<tr>
<td><img src="source/nb2­.png" alt="Notebook"></td>
<td>GS8DGF</td>
<td>AMD</td>
<td>ATI</td>
<td>Ano</td>
</tr>
<tr>
<td><img src="source/nb3­.png" alt="Notebook"></td>
<td>KG1862A</td>
<td colspan="2">Ne­uvedeno</td>
<td>Ne</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td><img src="source/nb1­.png" alt="Notebook"></td>
<td>AB8AC9</td>
<td>Intel Atom</td>
<td>Nvidia</td>
<td rowspan="2">A­no</td>
</tr>
<tr>
<td><img src="source/nb2­.png" alt="Notebook"></td>
<td>GS8DGF</td>
<td>AMD</td>
<td>ATI</td>
</tr>
<tr>
<td><img src="source/nb3­.png" alt="Notebook"></td>
<td>KG1862A</td>
<td>Neuvedeno</td>
<td>Neuvedeno</td>
<td>Ne</td>
</tr>
</tbody>
</table>
</body>
</html>`

 
Odpovědět
2.12.2021 12:49
Avatar
Odpovídá na Ladislav Šafránek
Václav Dachs:30.12.2021 16:11

Ahoj, poslední nemáš ohraničenou, protože tam nemáš nadeklarovanou tabulku. Máš tam:

</table>
<tbody>

Takže po ukončení předchozí tabulky nemáš znovu uvedeno, že jde o další tabulku. 😉

Odpovědět
30.12.2021 16:11
S úsměvem jde všechno lépe :-)
Avatar
Bc.Mahmoud Alqimah:12. února 23:32

Dobry den

Odpovědět
12. února 23:32
Mody
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jaroslav Drobek:18. března 7:04

Jistím, že <th> v patičce je jen doporučení, ve skutečnosti nahrazuje tag pro tučný font..Nejinak to očekávám v hlavičce, ale zjišťovat to teď nebudu ⏰

 
Odpovědět
18. března 7:04
Avatar
Libor Novák
Člen
Avatar
Libor Novák:3. dubna 3:08

Ahoj tag <b> pro zvýraznění je skutečně špatná volba. Je důležité pochopit, že vše se vyvíjí a vylepšuje. Tág <b> patří do staré verze HTML 3,0 a nižší. To bylo někdy v 90.. letech. Tehdy na webových stránkách byly maximálně obrázky, hypertextové odkazy a sem tam nějaká grafika. Rychlost internetu v té době byla velmi malá, takže každý grafický prvek stránky zpomalil. Proto se dříve tak neodděloval vzhled stránek od jeho struktury. S dobou se ale webové technologie zdokonalili natolik, že z webových stránek se staly plnohodnotné webové aplikace, u kterých jsou vyžadována určitá pravidla pro jejich vytváření. Jinak totiž není možné zaručit, že koncovému uživateli bude webová aplikace fungovat správně. To platí i u jednoduchých statických webových stránek. Základní pravidla pro vytváření webu jsou následující:

  1. Oddělovat logickou strukturu textu pomoci HTML od jeho grafického vzhledu
  2. Pro grafický vzhled webu (a i textu) používat styly v CSS jako oddělené šablony.
  3. Dbát na vkládání koncových HTML tágů (na to se dříve často zapomínalo) a dodržovat

    jejich správné vnoření.

Použitím tágu <b>, který už se nedoporučuje totiž nezaručíš, že se koncovému uživateli zobrazí ono zvýraznění správně. Dodržováním výše zmíněných jednoduchých pravidel ano. CSS styly budou vysvětleny až později. Pro zvýraznění textu z hlediska vzhledu (nikoli logiky) se místo zastaralého <b> používá <span class = "názevTřídyCSS">zvý­razněný text </span >
kde "názevTřídyCSS" je název třídy v jazyce CSS. V té si můžeme definovat podrobný grafický styl textu. Je to podobné jako používání stylů ve Wordu.

 
Odpovědět
3. dubna 3:08
Avatar
Tomáš Novotný:5. července 16:53

asi jsem hnidopich nebo nad tím moc přemýšlím anebo předbíhám, proč dělat složitější strukturu jako html ?

 
Odpovědět
5. července 16:53
Avatar
Tomáš Novotný:5. července 19:51

ne špatně, ale není vysvětlenoproč tabulce dávat složitější strukturu, podobnou, jakou má HTML stránka

 
Odpovědět
5. července 19:51
Avatar
Luboš Štancl:22. července 0:27

Zápatí tabulky <tfoot> a navazující řádky zápatí a buňky zápatí by chtělo doplnit o definici řádku <tr></tr> a buněk zápatí <tf></tf>. Toto jsem odhadl, ale nefunguje mi to, vykresluje mi zápatí nahoře nad tabulkou dokonce mimo ohraničenou oblast. Tato část není dobře popsaná.

Odpovědět
22. července 0:27
The first rule of programming: If it works, don't touch it.
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 80. Zobrazit vše