Seznamy a tabulky

WBA


Bc. Matěj Cajthaml — SSPŠ

©

Seznamy

Co jsou to vlastně seznamy?

Typy seznamů

  • unordered — neseřazené (odrážky)
  • ordered — seřazené (číslované)
  • definition — definiční

Neseřazené

  • tag ul — unordered list
  • tag li — list item

Tvorba

Seřazené

  • tag ol — ordered list
  • tag li — list item

Tvorba

Atribut type

Hodnoty: 1, A, a, I, i

Atribut start

Atribut reversed

Atribut value

Vnořené seznamy

Definiční

  • tag dl — description list
  • tag dt — define term
  • tag dd — define description

Tvorba

Vlastnost list-style-type

  • nastavení odrážek / řazení listu
  • hodnoty: zde a none

Vlastnost list-style-image

Vlastnost list-style-position

Náš reset vždy resetuje listy a nezobrazuje odrážky.

Vlastnost display

  • zajistí jak se bude prvek zobrazovat
  • známe inline (řádkový) a block (blokový)
  • přidáme inline-block a none

Vlastnost display

Vlastnost visibility

  • hodnoty: visible, invisible
  • zanechává místo ale nezobrazuje prvek
  • podobné chování jako opacity: 0;

Horizontální menu

Společná práce

Vytvoříme si horizontální menu — navigaci podle obrázku.

Vertikální menu

Práce

Zkuste z horizontální menu udělat vertikální.

Tabulky

Co jsou to tabulky?

Kde se tabulky využívají?

Tabulky

  • dvourozměrné pole
  • řádky a sloupce

Tabulky v minulosti

Tabulky se využívaly na rozložení stránek.

Tabulky nejsou responzivní. Co to znamená?

Tabulky nyní

  • fomuláře
  • data
  • přehledy
  • kalendáře
  • seznamy
  • ...

Náš reset nuluje styly tabulek.

Co je to:

Tabulka vs. řádek vs. sloupec vs. buňka?

Základní tagy tabulek

  • table — table
  • tr — table row
  • td — table data
  • th — table heading

Table

  • párový tag
  • určuje celou tabulku
  • můžeme nastavovat např. šířku či barvu

Tr

  • párový tag
  • označuje řádek tabulky
  • obsahuje definice buňek na řádku
  • určujeme např. ohraničení, odsazení

Td

  • párovy tag
  • určuje jednu buňku na řádku
  • buňka obsahuje obyčejné data
  • může obsahovat cokoliv

Th

  • párový tag
  • určuje hlavní buňku
  • např. nadpis sloupce, nadpis řádku
  • může obsahovat cokoliv

Ukázka tabulek

Ohraničení

Ukázka ohraničení

Vlastnost border-collapse

Stylování

Tag caption

  • popisek tabulky, vždy první tag tabulky

Rozdělení

  • tabulky můžeme rozdělit do tří části
  • thead, tbody, tfoot
  • musí být definované přesně zasebou v tomto pořadí
  • mentální zdraví kódera / norma
  • automaticky prohlížeče doplňují tbody

Ukázka rozdělení

Rozsahy buněk

Rozsahy buněk

  • někdy se nám hodí roztažení buňky na více řádku či sloupců
  • rowspan
  • colspan
  • atributy na tagu th či td
  • hodnota reprezentuje počet

Ukázka rozsahů

Další pseudotřídy

První dítě :first-child

Poslední dítě :last-child

k-té dítě :nth-child(k)

každé k-té dítě :nth-child(kn)

Proč?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/