Tabulky a zápatí

Poslední úpravy: tabulky a zápatí. Obě tabulky, ceník i program, dostanou vzhled ze stejných pravidel, takže je upravíte obě najednou.

Buňky dostanou polstrování, aby se sloupce neslepovaly, a pod každým řádkem tenkou čáru: spodní rámeček v béžové barvě karet. Buňky záhlaví jsou ve výchozím stavu tučné a zarovnané na střed, text-align: left je zarovná doleva, nad jejich data. Se seskupeným selektorem th, td upraví jedno pravidlo oba druhy buněk.

Ve výchozím stavu má každá buňka vlastní rámeček a mezi sousedními buňkami je malá mezera, takže čáry pod řádky by byly přerušované. Spraví to ještě jedna vlastnost: border-collapse: collapse (sloučit rámečky) u prvku table spojí rámečky sousedních buněk do jednoho, a tak každá čára vede přes celou tabulku.

Nakonec zápatí dostane stejné tmavé pozadí jako záhlaví, bílý text, polstrování a větší mezeru nad sebou (margin-top: 64px), aby bylo od obsahu jasně oddělené.

A to je celý web! Kino Hvězda má dvě propojené stránky se stejným záhlavím a zápatím a jeden soubor se styly, který jim dává vzhled: záhlaví rozvržené flexboxem, karty filmů v mřížce a úhledné tabulky. Stejně se staví i skutečné weby, jen mají víc stránek. Proklikejte si v náhledu obě stránky. V příští lekci dáte web na internet, abyste jeho adresu mohli poslat kamarádům. Lekce začíná právě tímto webem, takže si ho nemusíte ukládat.