Die Tabellen und der Footer

Die letzten Feinheiten: die Tabellen und der Footer. Beide Tabellen, die Ticketpreise und das Programm, bekommen ihr Aussehen aus denselben Regeln, du gestaltest sie also beide auf einmal.

Die Zellen bekommen Padding, damit die Spalten nicht aneinanderkleben, und unter jeder Zeile eine dünne Linie: einen unteren Rahmen im Beige der Karten. Kopfzellen sind standardmäßig fett und zentriert, und text-align: left setzt sie links über ihre Daten. Mit dem gruppierten Selektor th, td gestaltet eine Regel beide Arten von Zellen.

Standardmäßig hat jede Zelle ihren eigenen Rahmen, mit einer kleinen Lücke zwischen benachbarten Zellen, sodass die Linien unter den Zeilen in Stücke zerbrochen wären. Eine weitere Eigenschaft behebt das: border-collapse: collapse an der table verschmilzt die Rahmen benachbarter Zellen zu einem, sodass jede Linie über die ganze Tabelle läuft.

Der Footer bekommt schließlich denselben dunklen Hintergrund wie der Header, weißen Text, Padding und einen größeren Abstand nach oben (margin-top: 64px), damit er sich deutlich vom Inhalt abhebt.

Das ist die ganze Website! Das Kino Sternenlicht hat zwei Seiten, die miteinander verlinkt sind, mit demselben Header und Footer und einem Stylesheet, das ihnen ihr Aussehen gibt: einen mit Flexbox gestalteten Header, die Filmkarten in einem Grid und saubere Tabellen. Echte Websites werden genauso gebaut, nur mit mehr Seiten. Klicke in der Vorschau durch beide Seiten. In der nächsten Lektion stellst du die Website online, damit du ihre Adresse an deine Freunde schicken kannst. Die Lektion beginnt mit dieser Website, du musst sie also nicht speichern.