Lesson 4 of 8

Lists and tables

Lists are everywhere on the web. Navigation menus, shopping carts, recipe ingredients and search results are all lists. Tables are less common, but when you need to show data in rows and columns, nothing beats them. Let's look at both.

Unordered lists

When the order of the items doesn't matter, use an unordered list. It's the classic bullet point list:

html

<ul>
  <li>Coffee</li>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

ul wraps the whole list and each item gets its own li, short for list item. Only li elements are allowed directly inside a ul.

Ordered lists

When the order matters, like steps in a recipe or a top ten, use an ordered list instead:

html

<ol>
  <li>Boil the water</li>
  <li>Add the pasta</li>
  <li>Wait about ten minutes</li>
</ol>

The only difference is ol instead of ul. The browser numbers the items for you, so if you add a new step in the middle, the numbers update by themselves.

Quick check

You're listing the steps to install a program. Which element fits best?

Select one answer

Lists inside lists

You can put a whole list inside a list item. This is useful for things like menus with sub menus:

html

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Notice where the inner list goes: inside the li, before its closing tag. Not between two li elements.

When to use a table

Tables are for data that has rows and columns. Think of a train timetable, a price comparison or a list of exam results. If you'd naturally put the information in a spreadsheet, a table is probably the right choice.

A long time ago, people used tables to lay out entire web pages. Please don't. Layout is a job for CSS, and tables used for layout are confusing for screen readers and hard to make work on phones.

Building a table

Here's a small table showing opening hours:

html

<table>
  <caption>Opening hours</caption>
  <thead>
    <tr>
      <th>Day</th>
      <th>Open</th>
      <th>Close</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>09:00</td>
      <td>17:00</td>
    </tr>
    <tr>
      <td>Saturday</td>
      <td>10:00</td>
      <td>14:00</td>
    </tr>
  </tbody>
</table>

That's quite a few new elements, but each one has a simple job:

table wraps the whole thing
caption is the title of the table
thead holds the header row and tbody holds the actual data
tr is a table row
th is a header cell, like "Day" or "Open"
td is a regular data cell

Every row should have the same number of cells. If one row has three cells and the next has two, the table looks broken.

Using th for headers isn't just about looks. It tells screen readers what each column means, so they can say "Close, 17:00" instead of just "17:00".

Quick check

Which element is a single row in a table?

Select one answer

Quick check

Which of these is a good use for a table?

Select one answer

Try it yourself

Add a list and a table to your website:

Under your "What I'm learning" heading, add an unordered list of things you want to learn or build
Add a new h2 called "My learning plan" with an ordered list of the courses in this pathway: Getting set up, HTML, CSS, Git and GitHub, JavaScript
Optional: add a small table with something you care about, like your favorite books with title, author and year, or a weekly training schedule

Check that your table has a caption and uses th for the headers.