NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.

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 - Tabulky - Český HTML 5 manuál

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 - Tabulky - Český HTML 5 manuál

<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 - Tabulky - Český HTML 5 manuál

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


 

Všechny články v sekci
Tabulky - Český HTML 5 manuál
Článek pro vás napsal David Hartinger
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti 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