PHP, Praha? Mám pro Tebe tu práci cos chtěl a 15.000,- kč bonus. Napiš mi na [email protected] nebo klikni sem. Lucka

4. díl - Tabulky v HTML

HTML a CSS Statický web Tabulky v HTML American English version English version

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Obrázky a odkazy v HTML, jsme se naučili do stránek vkládat obrázky a odkazy. 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 sloupí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

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 sloupí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ě 2 buňky s textem "Ano". Jednu buňku opět vymažeme, té horní dáme atribut rowspan s hodnotou 2. První 2 řádku 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.

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 958x (16.95 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
80 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 College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Obrázky a odkazy v HTML
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Seznamy v HTML a zopakování tabulky
Aktivity (4)

 

 

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

Avatar
Jiří Jirout:13.12.2017 16:08

Mohl bys mi ukázat příklad ? Díky :)

 
Odpovědět 13.12.2017 16:08
Avatar
TEX
Člen
Avatar
Odpovídá na TEX
TEX:13.12.2017 16:28

E: To je bohužel trochu dementní. Když už tak bys to měl chtít takto https://www.w3schools.com/code/tryit.asp?…

 
Odpovědět 13.12.2017 16:28
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Jiří Jirout
IT Man:13.12.2017 16:29

V tom řádku už máš 5 buněk a normálně má ta tabulka 5 buněk - nemůžeš tedy slučovat 5. buňku s nějakou 6. Jak psal Neaktivní uživatel - musíš mít o jednu buňku méně. Poslední řádek by mohl vypadat nějak takto:

<tr>
                <td><img src="obrazky/nb3.png" alt="Notebook"></td>
                <td>KG1862A</td>
                <td>Neuvedeno</td>
                <td colspan="2">Ne</td>
</tr>

Když si to vyzkoušíš, uvidíš, že to Ne už je přes dva sloupce. :)

Odpovědět  +1 13.12.2017 16:29
Cokoliv a kdokoliv může jednou uspět.
Avatar
Jiří Jirout:13.12.2017 16:33

IT Man fakt díky takhle přesně sem to chtěl vysvětlit :)

 
Odpovědět 13.12.2017 16:33
Avatar
Peter Butora
Člen
Avatar
Peter Butora:16.12.2017 20:30

Ahoj zmátlo mě jedna věc asi tomu nerozumím ale stojí se zeptat...
v lekci 3 se učilo vkládat obrázky tímto kodem:
<p>
<img src="obrazky/a­vatar.png" alt="Programátor HoBi" />
</p>
a v tomto článku chybí na konci to uzavření to lomítko nevím proč se to v tomhle případě nepíše :(
<tr>
<td><img src="obrazky/nb1­.png" alt="Notebook"></td>
<td>AB8AC9</td>
<td>Intel Atom</td>
<td>Nvidia</td>
<td>Ano</td>
</tr>

Odpovědět 16.12.2017 20:30
Péťa
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Peter Butora
IT Man:16.12.2017 21:41

To lomítko se tam psát nemusí. Důvod ti už ale neposkytnu, sám to nevím. Dle mého názoru je ale lepší ho tam psát - je to nepárový tag a aspoň poznáš, kde už končí. ;)

Odpovědět  +1 16.12.2017 21:41
Cokoliv a kdokoliv může jednou uspět.
Avatar
LittleBigOwl
Redaktor
Avatar
Odpovídá na Peter Butora
LittleBigOwl:16.12.2017 22:11

Ahoj, ako píše IT Man, jedná sa o nepárový tag a či to lomítko napíšeš, alebo nie, to je na tebe, v HTML5 to nie je nutné.
Písať tieto tagy s lomítkom je nutné v XHTML (a mám pocit že aj v niektorých javascriptových framworkoch (napr. angular pri vytváraní komponentu), ale to si nie som istý). XHTML sa však už používa veľmi málo, tak ťa to nemusí trápiť :)

Odpovědět  +2 16.12.2017 22:11
Act as if it was Impossible to Fail
Avatar
Jindřich Volf:7. února 19:22

Já si ani nevšim, že tam lomítko není a prostě ho tam napsal. Snažím se kód neopisovat, když tuším. :) Jinak, opět super vysvětleno.

 
Odpovědět 7. února 19:22
Avatar
František Kreisinger:21. března 16:20

Na problémy se zapamatováním si různých tagů i příkazů a funkcí ať už při tvorbě webů či programování vůbec jsou nejlepší příručky typu Reference Guide (Complete Reference Guide) a pod. S tištěnými v češtině je to většinou bída, spousta jich je ale v angličtině. Jinak se ale dají najít na webu, třeba na https://www.w3schools.com/…/default.asp.

Editováno 21. března 16:21
Odpovědět 21. března 16:20
Začátečník v PHP, HTML i webovém programování vůbec.
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 48. Zobrazit vše