6.2: Favorites CSS

Style the whole table

Back to the style.css file. Let's start by moving the table into the center of the section... in the past we've used text-align and justify content - but that is only for text based content. For a whole table we can set the left-right margins to auto and it will set the left and the right margins to be automatically calculated and balanced. We will also add 32px of margin to the top and bottom.

...and... include a black border around the entire table...

table {
  margin: 32px auto;
  border: 1px solid black;
}

Whole Table

Whole Table Result

Table headers

Right now the table headers don't stand out very much. Let's add a gray background to the headers.

th {
  background-color: gray;
}

Headers

Style the cells

Everything is very squished together... each cell (both the <td> and <th> tags) should get some breathing room... let's center the content and add some borders around them too.

td, th {
  text-align: center;
  padding: 10px;
  border: 1px solid black;
}

Cells

Cells Result

Next Section

The table is easily readable now... so let's finish things up by adding a footer to the bottom of the page. Go to 7.1: Footer.