Struktura tabulky, vzhled tabulky pomocí CSS, sloučení buněk (rowspan, colspan)

Formát: 30 min praktická úloha, 15 min obhajoba + teorie. Tady je teorie kompletní (i s tím, co tvoje původní zápisky neměly: <caption>, scope, responsive tables, sticky header) a praktika s řešením.

Část 1: Teorie

K čemu tabulky slouží (a k čemu NE)

Tabulky jsou pro tabulková data: informace organizované do řádků a sloupců, kde má smysl je porovnávat (ceník, rozvrh, výsledky, statistiky, technické parametry produktu).

Důležitý kontext: V 90. letech a začátku 2000. let se tabulky používaly pro layout celé stránky (různě vnořené <table> pro hlavičku, sidebar, main). To byl klasický anti-pattern, který zabíjel SEO, accessibility a zpomaloval rendering. Dnes jsou pro layout Flexbox a Grid, tabulky jen pro skutečná tabulková data.

Použít tabulku Nepoužívat tabulku
Ceník služeb Layout celé stránky
Rozvrh hodin Mřížka karet produktů (použij Grid)
Sportovní výsledky Formulář (použij CSS Grid nebo Flexbox)
Technické parametry Galerie obrázků
Porovnání produktových plánů Vícesloupcový text (použij CSS columns)
Bankovní výpisy Hero sekce, navbar, footer

Základní struktura

<table>
    <tr>                           <!-- table row -->
        <th>Jméno</th>             <!-- table header (záhlaví buňka) -->
        <th>Věk</th>
        <th>Město</th>
    </tr>
    <tr>
        <td>axo</td>               <!-- table data (běžná buňka) -->
        <td>18</td>
        <td>Liberec</td>
    </tr>
    <tr>
        <td>karel</td>
        <td>19</td>
        <td>Praha</td>
    </tr>
</table>
Element Plný název K čemu
<table> Table Kořen tabulky
<tr> Table Row Jeden řádek
<th> Table Header Záhlaví (bold, centrované)
<td> Table Data Běžná buňka

Drobnost: atribut <table border="1"> je HTML4 přežitek. Dnes se ohraničení dělá výhradně v CSS. Pro maturitu si to pamatuj: border="1" v HTML je deprecated.

Sémantické sekce: thead, tbody, tfoot

Tabulku lze (a měla by se) rozdělit na tři logické části:

<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Cena</th>
            <th>Dostupnost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Notebook</td>
            <td>20 000 Kč</td>
            <td>Skladem</td>
        </tr>
        <tr>
            <td>Telefon</td>
            <td>10 000 Kč</td>
            <td>Není skladem</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Ceny jsou včetně DPH.</td>
        </tr>
    </tfoot>
</table>
Element K čemu
<thead> Hlavička (typicky 1 řádek s <th> názvy sloupců)
<tbody> Tělo (data)
<tfoot> Patička (typicky souhrn, total, poznámka)

Výhody rozdělení: