# 6.1: Favorites HTML

## Add a new section

In `index.html` we need to add another section for this "Favorites" portion of the webpage - again, we need to give the section an ID attribute so the link in our header will work. Just like we did during the "Facts" portion, let's use in-line-styling to give this section a light gray background

```markup
<section id="favorites" style="background-color: lightgray;">
  <h3>Favorites</h3>

</section>
```

![Favorites Section](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8o6FkKik-GFUScqn%2F6.1-section.png?generation=1524162317706875\&alt=media)

## Create our table

We want to display our favorite movie, book, TV show, and song... and we can also display a few other good choices too... A good way to display this information is with a table.

* Every table is wrapped in `<table> </table>` tags
* Every row in the table is wrapped in `<tr> </tr>` tags
* We can add table headers with `<th> </th>` tags
* For the table data, we display each cell using `<td> </td>` tags

```markup
<table>
  <tr>
    <th>Topic</th>
    <th>Favorite</th>
    <th>Runner Up</th>
    <th>Another Good One</th>
  </tr>
  <tr>
    <td>Movie</td>
    <td>Shrek</td>
    <td>Frozen</td>
    <td>Homeward Bound</td>
  </tr>
  <tr>
    <td>Book</td>
    <td>Harry Potter and the Deathly Hallows</td>
    <td>The Great Gatsby</td>
    <td>The Art Of Computer Programming</td>
  </tr>
  <tr>
    <td>TV Show</td>
    <td>M.A.S.H.</td>
    <td>Happy Days</td>
    <td>Friends</td>
  </tr>
  <tr>
    <td>Song</td>
    <td>Friends in Low Places</td>
    <td>Baby One More Time</td>
    <td>Ring of Fire</td>
  </tr>
</table>
```

![Table HTML](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8oCWt3oAneEB_N9c%2F6.1-table-html.png?generation=1524162330993447\&alt=media)

![Table Result](https://4118857389-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfYZY6fNRjyl8-Q%2F-LAU8eVd3Wu50JiXv8yI%2F-LAU8oDIuFf6BKVNrmwM%2F6.1-table-result.png?generation=1524162340967177\&alt=media)

## Next Section

This table definitely needs some styling. Go to [6.2: Favorites CSS](https://eleven-fifty-academy.gitbook.io/intro-to-coding/part-6-favorites/6.2-favorites-css).