The Tables and the Footer

The last touches: the tables and the footer. Both tables, the ticket prices and the showtimes, get their look from the same rules, so you'll style them both at once.

The cells get padding, so that the columns don't stick together, and a thin line under each row: a bottom border in the beige of the cards. Header cells are bold and centered by default, and text-align: left puts them on the left, above their data. With the grouped selector th, td, one rule styles both kinds of cells.

By default, each cell has its own border, with a small gap between neighboring cells, so the lines under the rows would be broken into pieces. One more property fixes that: border-collapse: collapse on the table merges the borders of neighboring cells into one, so that each line runs across the whole table.

Finally, the footer gets the same dark background as the header, white text, padding and a bigger gap above it (margin-top: 64px), so that it's clearly apart from the content.

That's the whole website! The Starlight Cinema has two pages linked to each other, with the same header and footer, and one stylesheet that gives them their look: a header laid out with Flexbox, the film cards in a grid and tidy tables. Real websites are built the same way, only with more pages. Click through both pages in the preview. In the next lesson, you'll put the site online, so that you can send its address to your friends. The lesson starts with this website, so you don't need to save it.