Jednoduché tabulky - Český HTML 5 manuál

HTML a CSS Manuál Tabulky Jednoduché tabulky - Český HTML 5 manuál

Č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é. Narozdí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ů, statistik. Například na devbooku se tabulky mimo jiné využívají na výpis programů a tutoriálů.

<table>

Tabulka se označuje tagem <table> a obsahuje jednotlivé řádky. Tabulka má jediný atribut:

  • border - Označuje šířku rámečku kolem buněk tabulky. Výchozí hodnota je 0 a bez uvedení nemá tabulka tedy žádný rámeček. Protože formátování se přesunulo do CSS, border má podle nového standardu HTML5 obsahovat pouze hodnoty "" (prázdná hodnota) nebo "1". Tím se odliší, zda tabulku používáme k pouhému rozvržení elementů na stránce (tzv. layout) nebo v ní máme opravdu nějaká data.

<tr>

Řádky vkládáme do tabulky pomocí tagu <tr> (jako Table Row = řádek tabulky). Řádek obsahuje jednotlivé buňky.

<td>

Buňky do řádku vkládáme tagem <td> (jako Table Data). Buňka může obsahovat text, obrázky a libovolné další elementy. Výchozí formátování je zarovnání vlevo.

Jednoduchá tabulka o 3 sloupích a 2 řádcích by mohla vypadat takto:

<table border="1">
        <tr>
                <td>První buňka</td>
                <td>Druhá buňka</td>
                <td>A třetí</td>
        </tr>
        <tr>
                <td>Začneme další řádek</td>
                <td>Druhá v druhém řádku</td>
                <td>Poslední buňka</td>
        </tr>
</table>

Výsledek:

Jednoduchá HTML tabulka

<th>

Tag <tr> může kromě buněk (<td>) obsahovat také speciální hlavičkové buňky <th>. Ty se vkládají do prvního řádku tabulky a ten je poté chápán jako hlavička. Výchozí formátování je zarovnání na střed a tučné písmo. Tabulka s hlavičkou by mohla vypadat např. takto (přidali jsme i obrázky):

<table border="1">
        <tr>
                <th>Náhled</th>
                <th>Typ</th>
                <th>Procesor</th>
                <th>Graf. karta</th>
                <th>Skladem</th>
        </tr>
        <tr>
                <td><img src="images/notebook1.jpg" alt="Notebook" /></td>
                <td>ABC123</td>
                <td>Intel Atom</td>
                <td>Nvidia</td>
                <td>Ano</td>
        </tr>
        <tr>
                <td><img src="images/notebook2.jpg" alt="Notebook" /></td>
                <td>WTF845</td>
                <td>AMD</td>
                <td>ATI</td>
                <td>Ano</td></tr>
        <tr>
                <td><img src="images/notebook3.jpg" alt="Notebook" /></td>
                <td>OMG666</td>
                <td>Neuvedeno</td>
                <td>Neuvedeno</td>
                <td>Ne</td>
        </tr>
</table>

Výsledek:

HTML tutoriál – Tabulka
Atributy tagů <td> a <th>
colspan

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, 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 by vypadal takto:

<table border="1">
  <tr>
                <th>Náhled</th>
                <th>Typ</th>
                <th>Procesor</th>
                <th>Graf. karta</th>
                <th>Skladem</th>
        </tr>
    <tr>
                <td><img src="images/notebook1.jpg" alt="Notebook" /></td>
                <td>ABC123</td>
                <td>Intel Atom</td>
                <td>Nvidia</td>
                <td>Ano</td>
        </tr>
    <tr>
                <td><img src="images/notebook2.jpg" alt="Notebook"></td>
                <td>WTF845</td>
                <td>AMD</td>
                <td>ATI</td>
                <td>Ano</td>
        </tr>
    <tr>
                <td><img src="images/notebook3.jpg" alt="Notebook" /></td>
                <td>OMG666</td>
                <td colspan="2">Neuvedeno</td>
                <td>Ne</td>
        </tr>
  </tbody>
</table>

A výsledek:

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

Obdobně můžeme spojovat i buňky ve sloupci a to pomocí atributu rowspan, který udává, přes kolik řádků se spojuje. Udělejme si další ukázku:

<table border="1">
        <tr>
                <td rowspan="2">Sloupec s rowspan</td>
                <td>Druhý sloupec</td>
        </tr>
        <tr>
                <td>Druhý sloupec</td>
        </tr>
        <tr>
                <td>A nový řádek</td>
                <td>Již není ovlivněn</td>
        </tr>
</table>

Výsledek:

Stejně jako u colspan, i zde několik buněk vynecháme a ty jsou nahrazeny buňkou jednou s atributem rowspan. V druhém řádku jsme tedy vynechali 1. buňku, jelikož do ní zasahuje 1. buňka 1. řádku.

Jednoduchá HTML tabulka s rowspan
headers

Atribut udává hlavičky, kte kterým se buňka váže. Jeho hodnotou je seznam id hlaviček, oddělených mezerou. V prohlížečích se atribut nijak neprojeví, ale může mít význam u hlasových čteček.

scope

Narozdíl od výše uvedených atributů je scope pouze pro <th>. Tag určuje, zda se popisek v hlavičkové buňce vztahuje k sloupci nebo k řádku. Opět je jeho význam pouze pro hlasové čtečky.

Hodnoty:

  • col - Hlavička patří sloupci
  • row - Hlavička patří řádku
  • colgroup - Hlavička patří více sloupcům
  • rowgroup - Hlavička patří více řádkům

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 prakticky lépe nejde, je to z významového hlediska nevhodné. 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. Naštěstí se zjistilo, že zrovna toto na návštěvnost stránek nemá žádný vliv. 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.

Tabulky mají ještě několik dalších tagů, na ty bude vyčleněn samostatný článek.


 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
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
Všechny články v sekci
Tabulky - Český HTML 5 manuál

 

 

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

Avatar
Kit
Redaktor
Avatar
Kit:

Doufal jsem, že pochopíš "v drtivé většině případů". A těch zbývajících skutečně moc není. Každý typografický útvar se dá nějak označit. Stačí použít správnou značku a správně ji nastylovat.

Že Word může změnit odstavce mě vcelku ani moc nezajímá, nepoužívám ho. Neumí formátovat text, uživatelé v něm získávají špatné návyky. Většina z nich neumí ani udělat nadpis a spousta jich potřebuje ruční řádkový zlom.

Odpovědět 5.9.2012 9:32
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
samo007
Redaktor
Avatar
samo007:

Práve o to ide. ;)

 
Odpovědět 5.9.2012 10:34
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

Word už od verze 2007 funguje jako HTML, předchozí verze byly jako psací stroj a opravdu učily lidi špatně psát.

Odpovědět 5.9.2012 10:57
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
samo007
Redaktor
Avatar
Odpovídá na David Čápka
samo007:

Ano, podporujú html, ale ako mohli ľudí zle učiť písať? o_O

 
Odpovědět 5.9.2012 20:55
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na samo007
David Čápka:

Kit to již výše psal. Místo odstavce lidi lámaly řádky (protože to dělala klávesa enter, od Wordu 2007 ti enter udělá odstavec). Stejně tak místo vložení nadpisu jen nastavili velký font a odřádkovali. Celý dokument byl potom jeden velký odstavec a když chtěli třeba změnit styl nadpisů, museli to ručně u všech změnit. Word 2007 již dbá na sémantiku a stylování.

Odpovědět 5.9.2012 20:58
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
samo007
Redaktor
Avatar
samo007:

Aha :) ďakujem, už som to pochopil. Ale myslím, že niekedy to aj tak bude nutné použiť. Niektoré časti viet majú v slovenčine určené, že niekedy je potrebné mechanické zalamovanie z gramatického hľadiska. napr. samostatné písmeno "a" nesmie byť na konci riadku.

Ďakujem za rady. Teraz to už chápem, ale ten word by mohol mať aj možnosť zalamovania práve pre tento problém. Teraz, keď viem dôvod, tak vám môžem iba poďakovať za vysvetlenie. Som rád, že som to pochopil :D

 
Odpovědět 5.9.2012 23:00
Avatar
Kit
Redaktor
Avatar
Odpovídá na samo007
Kit:

Tvůj problém se zalamováním na konci řádku nelze pomocí < br > vyřešit, protože nevíš, jako velké písmo má uživatel nastavené na monitoru. Správně se to řeší tzv. nezlomitelnou mezerou, kterou si zmíněný Word plete s pevnou mezerou.

Rozhodně se nesnaž řešit problém s "a" na konci řádku ručním zalamováním. To je špatné řešení. Používám na to program Vlna.

Odpovědět 6.9.2012 6:17
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
samo007
Redaktor
Avatar
samo007:

Čo je to za program? o_O

 
Odpovědět 6.9.2012 11:11
Avatar
Kit
Redaktor
Avatar
Odpovídá na samo007
Kit:

Vlna? Za některé předložky, za kterými nesmí být řádkový zlom, vkládá místo normální mezery znak vlnky ~ nebo entitu & nbsp;, aby zůstaly spojeny s následujícím slovem.

Výsledkem je, že se to vždy zalomí správně, i když měníš šířku bloku nebo velikost či typ písma.

Odpovědět 6.9.2012 11:49
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
samo007
Redaktor
Avatar
samo007:

:OTak to som nevedel, ďakujeeem :)

 
Odpovědět 6.9.2012 16:21
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 18. Zobrazit vše