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

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

</section>

Favorites Section

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

<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

Table Result

Next Section

This table definitely needs some styling. Go to 6.2: Favorites CSS.