Pro zopakování CSS Grid další hra.

Seznamy

• seznam s odrážkami - ul
• číslovaný seznam - ol
• položky seznamu - li
• seznam definic - dl
• položky (term) - dt, dd

Vizualizace seznamů

• list-style-type
• list-style-position
• list-style-image
• list-style
• @counter-style

Tabulky

Pouze k tabulkovým datům, nikoliv k layoutu.

elementy

• table - vymezení tabulky
• thead - skupina řádků tvořídí hlavičku tabulky
• tbody - skupina řádků tvořící tělo tabulky
• tfoot - skupina řádků tvořící patičku tabulky
• tr - řádek tabulky (Table Row)
• th - buňka hlavičky tabulky
• td - buňka tabulky
• colgroup - skupina sloupců
• col - sloupec tabulky
• caption - popisek tabulky, hned za elementem table

Vizualizace tabulek

• border-collapse
• border-spacing
• caption-side
• table-layout

Responsivita tabulek

podrobněji popsána ve skriptech

Formuláře

• fieldset
• legend
• label
• input
• text
• password
• button
• radio
• checkbox
• file
• email
• url
• phone
• date
• number
• range
• color
• required
• disabled
• readonly
• maxlength
• placeholder
• pattern
• textarea
• selectbox
• datalist
• button

Vizualizace formulářů

Formuláře mají značné problémy s dědičností, je třeba být tedy důsledný při stylování. Dokonce není možné některé prvky stylovat pomocí CSS, ale je třeba k vizualizaci JS. S tímto problémem se ovšem v našich úkolech nesetkáme.

Je potřeba nepočítat s výchozí vizualizací, jelikož se u prohlížečů dost liší. K vizualizaci je dobré využít některé pseudotřídy (focus, checked, disabled, enabled, required, ...)

pro rozložení formulářů je vhodné využít grid, případně také flexbox, jak jsme již zvyklí.

Další elementy

• figure, figcaption
• audio, video
• meter
• progress
• iframe
• canvas
• dialog
• details summary
• map, area
• svg