Tabulky

15. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

K čemu slouží tag div?
Co je to HTML entita?
Jaké znáte styly ohraničení?
K čemu slouží vlastnost display?
Co jsou to obrázkové mapy? K čemu slouží?

Tabulky

Co jsou to tabulky?

Kde se tabulky využívají?

Tabulky

  • dvou rozměrné pole
  • řádky a sloupce

Tabulky v minulosti

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

Tabulky nejsou responzivní.

Tabulky nyní

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

Náš reset nuluje styly tabulek.

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

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)

Kahoot!

Výsledková tabulka

Práce

https://ssps.cajthaml.eu/2-wba/work/16-vysledkova-tabulka

Shrnutí

K čemu slouží vlastnost list-style-position?
Proč jsou tabulky špatné?
K čemu slouží tag caption? Kam ho vkládáme?
Co dělá vlastnost border-collapse?
K čemu slouží vlastnost letter-spacing?

Děkuji za pozornost!

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