Pokročilé tabulky - Český HTML 5 manuál

HTML a CSS Manuál Tabulky Pokročilé tabulky - Český HTML 5 manuál

Pokročilé tabulky

Kromě jednoduchých tagů k tvorbě tabulek nám poskytuje HTML 5 nové pokročilé tagy. Asi největší změnou je rozdělení tabulky na hlavičku, tělo a patičku. Tabulka dostává podobnou strukturu, jako HTML stránka.

<thead>

V párovém tagu <thead> je obalen hlavičkový řádek tabulky, popisující, jaké údaje jednotlivé sloupce obsahují.

<tfoot>

Tabulka může obsahovat také patičku, která často obsahuje např. součet hodnot ve sloupci. Možná trochu nezvyklé může být, že patičku píšeme před <tbody>.

<tbody>

Samotný obsah tabulky se dále vyskytuje v <tbody>.

Udělejme si příklad pokročilé tabulky:

<table border="1">
<thead>
        <tr>
                <th>Náhled</th>
                <th>Produkt</th>
                <th>Množství</th>
                <th>Cena</th>
        </tr>
</thead>
<tfoot>
        <tr>
                <td colspan="2">Celkem</td>
                <td>10</td>
                <td>61 478 Kč</td>
        </tr>
</tfoot>
<tbody>
        <tr>
                <td><img src="images/lcd.jpg" alt="LG 42LS570S - LCD televize 42" /></td>
                <td>LG 42LS570S - LCD televize 42</td>
                <td>2</td>
                <td>14 129 Kč</td>
        </tr>
        <tr>
                <td><img src="images/gtx.jpg" alt="GIGABYTE GTX 560 Ultra Durable" /></td>
                <td>GIGABYTE GTX 560 Ultra Durable</td>
                <td>5</td>
                <td>4 130 Kč</td>
        </tr>
        <tr>
                <td><img src="images/htc.jpg" alt="HTC Wildfire S, černá" /></td>
                <td>HTC Wildfire S, černá</td>
                <td>3</td>
                <td>4 190 Kč</td>
        </tr>
</tbody>

a výsledek:

Tabulka s patičkou tfoot

Výhodou takovéhoto rozdělení tabulky je např., že prohlížeče mohou při scrollování zobrazovat stále hlavičku a patičku, i když se obsah hýbe. Také při tisku může být na každé stránce znovu hlavička.

<caption>

Tabulce můžeme přidat nadpis. Ten se vloží pomocí tagu <caption> rovou za tag <table>. Při výchozím nastavení se text v <caption> zobrazí centrovaný nad tabulkou. Udělejme si ukázku.

<table border="1">
        <caption>Nadpis tabulky</caption>
        <tr>
                <td>Tabulka s</td>
                <td>nadpisem</td>
        </tr>
</table>

Výsledek:

Tabulka s nadpisem caption

<colgroup>

Sloupce je možné seskupovat do skupin a skupinám poté nastavovat různé CSS styly. Obvykle tím rozdělíme tabulku na logické skupiny sloupců. Slouží k tomu tag <colgroup>, který obaluje tagy <col> pro definici formátování sloupců.

<col>

Colgroup obsahuje elementy <col>, které definují styl sloupců ve skupině. Col má atribut span:

  • span - Uvádí, kolik sloupců col představuje.

Udělejme si další ukázku, v tabulce níže logicky spojíme sloupce s ptáky a sloupce se psy:

<table border="1">
        <colgroup>
                <col style="background: #FFBBBB;" />
                <col span="3" style="background: #AAFFAA" />
                <col span="2" style="background: #BBBBFF;" />
        </colgroup>
        <tr>
                <th>Město</th>
                <th>Kos</th>
                <th>Straka</th>
                <th>Výr</th>
                <th>Jorkšír</th>
                <th>Westík</th>
        </tr>
        <tr>
                <td>Praha</td>
                <td>100 000</td>
                <td>80 000</td>
                <td>80</td>
                <td>110 000</td>
                <td>90 000</td>
        </tr>
        <tr>
                <td>Brno</td>
                <td>50 000</td>
                <td>30</td>
                <td>3</td>
                <td>70 000</td>
                <td>40 000</td>
        </tr>
        <tr>
                <td>Úvaly</td>
                <td>600</td>
                <td>400</td>
                <td>1</td>
                <td>700</td>
                <td>300</td>
        </tr>
</table>

Výsledek:

Tabulka se seskupením sloupců colgroup

Span můžeme použít i v colgroup, která také tento atribut obsahuje.


 

  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

Avatar
hh
Člen
Avatar
hh:

Chci se zeptat, když udělám tabulku podle tohoto návodu, google chrome mi nevezme diakritiku. Jak to opravit, aby mi to prohlížeč vzal ?

Odpovědět 17.6.2013 18:02
Dostane se ti toho, čeho se zasloužíš...
Avatar
Amomym
Člen
Avatar
Odpovídá na hh
Amomym:

však když děláš web tak tam je hlavička a tam dáš kódování utf-8

 
Odpovědět 17.6.2013 18:04
Avatar
hh
Člen
Avatar
Odpovídá na Amomym
hh:

Jaj, no jo. Na to jsem úplně zapomněl sorry :`

Odpovědět 17.6.2013 18:06
Dostane se ti toho, čeho se zasloužíš...
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 3 zpráv z 3.