Tabulkový element

<table>

Tabulka. Data v řádcích a sloupcích, která dávají smysl, jen když jsou pohromadě.

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

Zápis

Řádky a buňky

Tabulka se píše po řádcích. Každý řádek je tr a v něm buňky td. Sloupce nikde nezapisujeme, vzniknou samy z buněk pod sebou.

Řádkům a buňkám se podrobně věnuje lekce <tr> <th> <td>.

Zápis

Záhlaví sloupců

Bez záhlaví nevíme, co čísla znamenají. První řádek dáme do thead a jeho buňky zapíšeme jako th. Prohlížeč je ztuční a screen reader je přečte u každé buňky ve sloupci.

Zbytek řádků obalíme do tbody. Co tyhle části umějí, ukazuje lekce <thead> <tbody>.

Zápis

Nadpis tabulky

caption je nadpis, který k tabulce pevně patří. Píše se hned za otevírací <table>. Screen reader ho přečte jako první a uživatel ví, o čem tabulka je.

Pozor

Tabulka není layout

Kdysi se tabulkami skládaly celé stránky: menu v jedné buňce, obsah v druhé. Dnes na to máme grid a flex. Tabulka je jen pro data.

Jednoduchý test: dávají řádky a sloupce smysl, i když stránku čtete jen jako text? Pak je to tabulka.

Styl

Klidné linky

border-collapse: collapse spojí bordery sousedních buněk do jedné čáry. Pak stačí vzduch v buňkách a tenká linka pod každým řádkem.

Svislé čáry mezi sloupci většinou nejsou potřeba. Sloupce drží pohromadě zarovnání.

Styl

Čísla doprava

Čísla zarovnáme doprava, aby jednotky byly pod jednotkami a tisíce pod tisíci. tabular-nums dá všem číslicím stejnou šířku, takže sloupec je rovný.

Responzivita

Posouvání do strany

Široká tabulka se na telefon nevejde. Nejjednodušší řešení: obalíme ji do div, který se dá posouvat do strany. Tabulka zůstane celá a čitelná.

Zkuste tabulku v náhledu posunout prstem nebo kolečkem do strany. min-width zabrání tomu, aby se sloupce smrskly do nečitelných nudlí.

Responzivita

Z řádků karty

Druhá možnost pro krátké tabulky: na telefonu z každého řádku uděláme kartu. Záhlaví schováme a každé buňce napíšeme popisek z atributu data-label.

Pozor: po display: block některé screen readery přestanou tabulku poznávat. U velkých nebo důležitých dat je bezpečnější posouvání do strany.

Shrnutí

Jak stavět tabulky

Ano

• tabulka jen pro data
• caption a záhlaví v th
• čísla doprava a tabular-nums
• na telefonu posouvání do strany, u krátkých tabulek karty

Ne

• tabulka jako layout stránky
• tabulka, která na telefonu přetéká z obrazovky

Další: <thead> <tbody> →