C týden
Tento týden až 80% sleva na e-learning týkající se jazyka C
50 % bodů zdarma na online výuku díky naší Slevové akci!

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>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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:

Tabulka s tbody
localhost

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:

Nadpis tabulky
localhost

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

col a colgroup
localhost

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 další lekci, Textové tagy v HTML, si ukážeme textové tagy mezi které patří <p>, <q>, <blockquote>, <h1>, <h2>, <h3>, <h4> a další.


 

Předchozí článek
Jednoduché tabulky v HTML
Všechny články v sekci
HTML5
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes a svou gf
Aktivity (3)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!