Seznamy, tabulky, formuláře
18. 4. 2023
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
Úkol
odkaz na GitHub