Tabulkové elementy

<tr> <th> <td>

Řádky a buňky. Z nich je tabulka poskládaná: řádek po řádku, buňka po buňce.

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

Zápis

Řádek a v něm buňky

tr (table row) je řádek, td (table data) je buňka s daty. Každý řádek by měl mít stejný počet buněk. I prázdná buňka se píše, jinak se sloupce posunou.

Záhlaví

th a scope

th (table header) je buňka se záhlavím. scope říká, k čemu patří: col ke sloupci pod sebou, row k řádku vedle sebe. Screen reader pak u buňky „CSS“ přečte „úterý, 8:00“.

Spojování

Buňka přes víc sloupců

colspan roztáhne buňku doprava přes zadaný počet sloupců. Přestávka platí pro všech pět dní, takže jedna buňka zabere pět sloupců.

Řádek má teď jen dvě buňky, ale dohromady zase šest sloupců: 1 + 5.

Spojování

Buňka přes víc řádků

rowspan roztáhne buňku dolů. Dvouhodinovka HTML v pondělí bude jedna buňka přes dva řádky. V dalším řádku ji pak už nepíšeme: místo zabírá buňka shora.

Nejčastější chyba: zapomenout buňku v dalším řádku smazat. Tabulka pak má o sloupec víc a vyčnívá.

Styl

Mřížka rozvrhu

Spojíme bordery, buňkám dáme stejnou šířku a vzduch. Záhlaví sloupců i řádků ztlumíme, aby vynikl obsah.

table-layout: fixed rozdělí šířku mezi sloupce rovným dílem, bez ohledu na délku textu v buňkách.

Styl

Barvy podle předmětu

Buňky dostanou třídu podle předmětu a s ní jemné podbarvení. Rozvrh se pak dá přečíst jedním pohledem.

Barva je jen pomůcka navíc. Název předmětu zůstává v buňce, takže rozvrh přečte i člověk, který barvy nerozlišuje.

Responzivita

Posouvat dny, čas držet

Šest sloupců se na telefon nevejde. Tabulku necháme posouvat do strany a sloupec s časem přilepíme k levému okraji, aby bylo pořád vidět, o kterou hodinu jde.

Posuňte rozvrh v náhledu do strany. Přilepená buňka potřebuje pozadí, jinak by pod ní prosvítaly ostatní.

Shrnutí

Jak psát řádky a buňky

Ano

v každém řádku stejný počet sloupců, i prázdné buňky
th se scope="col" nebo scope="row"
colspan a rowspan pro spojené buňky
na telefonu posouvání a přilepený první sloupec

Ne

zapomenutá buňka pod rowspan
význam jen v barvě, bez textu

← Zpět do rejstříku