Lekce 7 - Pokročilé tabulky v HTML

V minulé lekci, Jednoduché tabulky v HTML, jsme si ukázali tagy <table>, <tr>, <td>, <th>, atributy border, colspan, rowspan, headers, scope a slučování buněk v tabulce.

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. Patičku můžeme napsat před nebo za <tbody>, patička bude vždy na konci.

<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>117 878 Kč</td>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td><img src="images/713/html/assets/lcd.png" alt="Acer KG241 23,6 palců LCD" width="80" /></td>
        <td>Acer KG241 23,6" LCD</td>
        <td>2</td>
        <td>14 129 Kč</td>
    </tr>
    <tr>
        <td><img src="images/713/html/assets/gtx.png" alt="GIGABYTE NVIDIA GeForce® GTX 1660" width="80" /></td>
        <td>GIGABYTE NVIDIA GeForce® GTX 1660</td>
        <td>5</td>
        <td>4 130 Kč</td>
    </tr>
    <tr>
        <td><img src="images/713/html/assets/note.png" alt="Samsung Note 10, Aura Glow" width="80" /></td>
        <td>Samsung Note 10, Aura Glow</td>
        <td>3</td>
        <td>22 990 Kč</td>
    </tr>
</tbody>

Pro hezčí ukázku využijeme i CSS kód z minulé lekce, ať tabulka trochu lépe vypadá:

table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border-spacing: 0;
  text-align: center;
}
table tr td {
  padding: 4px;
}

CSS nám nastaví písmo, okraje tabulky, šířku tabulky na 100 % stránky, vycentrování textu a nakonec vnitřní odsazení, ať text není nalepený na tabulce. Ve výsledku budeme mít toto:

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> rovnou 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 v prohlížeči:

<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>

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

• span - Uvádí, kolik sloupců element <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>

Ve výsledku dosáhneme tohoto:

Vlastnost span můžeme použít i v elementu colgroup, který také tento atribut podporuje. Tabulky nastylované defaultně není vhodné využívat pro responzivní webdesign. Pokud byste se o tabulkách chtěli dozvědět více, v kurzu responzivního designu probíráme i responzivní tabulky.

V následujícím kvízu, Kvíz - Seznamy a tabulky v HTML5, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.