Tabulkové elementy

<thead> <tbody>

Části tabulky. Záhlaví, tělo a zápatí, které tabulce dávají strukturu.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Záhlaví a tělo

Řádky se záhlavím sloupců patří do thead, řádky s daty do tbody. Na vzhledu se skoro nic nezmění, ale prohlížeč a screen reader teď vědí, co je popisek a co obsah.

Pozor

tbody tam je vždycky

Když tbody nenapíšete, prohlížeč ho kolem řádků doplní sám. To se projeví v CSS: selektor, který čeká řádek přímo v tabulce, nic nenajde.

Proto table > tr nefunguje, ale table tr ano. Nejjistější je psát tbody vždycky sami.

Skupiny

Víc těl v jedné tabulce

tbody může být v tabulce víckrát. Každé tělo je jedna skupina řádků s vlastním nadpisem. Nadpis skupiny je buňka th přes celou šířku se scope="rowgroup".

colspan="4" roztáhne buňku přes čtyři sloupce.

Zápis

Zápatí se součtem

tfoot je pro řádky, které shrnují celou tabulku: součet, průměr, poznámku. Píše se až za všechna těla.

„Celkem“ je záhlaví řádku, proto th se scope="row". Screen reader u ceny přečte: „Celkem, 3 610 Kč“.

Styl

Každá část jinak

Části tabulky jsou skvělé háčky pro CSS. Záhlaví ztlumíme, nadpisy skupin podbarvíme a zápatí oddělíme silnější čárou.

Styl

Sticky záhlaví

U dlouhé tabulky se záhlaví odroluje pryč a nevíte, co který sloupec znamená. position: sticky ho přilepí k hornímu okraji. Tabulku tu obalíme do div s omezenou výškou, ať je to vidět.

Zkuste tabulku v náhledu posunout. Lepí se buňky th, ne celý thead, a potřebují pozadí, jinak by přes ně prosvítaly řádky.

Responzivita

Méně důležitý sloupec pryč

Kód položky na telefonu nikdo nepotřebuje a bere místo názvu. Sloupce popíšeme v colgroup: jeden col za každý sloupec. Celý sloupec pak jde na úzkém displeji schovat jedním pravidlem.

Proč ne display: none na buňky? Řádky by pak měly o buňku méně, ale „Celkem“ s colspan="3" by se roztáhlo pořád přes tři sloupce a součet by uskočil mimo sloupec cen.

Shrnutí

Jak členit tabulku

Ano

thead pro záhlaví, tbody pro data, tfoot pro součty
víc tbody pro skupiny řádků
sticky záhlaví u dlouhých tabulek
na telefonu schovat přes col sloupec, bez kterého se obejdeme

Ne

selektor table > tr
součet jako obyčejný řádek uprostřed dat

Další: <tr> <th> <td> →