Lists and tables

What you will build

Add a task list and weekly progress table with associated headers.

Understand the idea first

Lists express order or grouping. Tables support row-and-column comparison; they are not page layout tools.

Build it step by step

<h2>Next tasks</h2>
<ol>
  <li>Finish HTML</li>
  <li>Check the structure</li>
  <li>Start CSS</li>
</ol>
<table>
  <caption>
    This week's study progress
  </caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Topic</th>
      <th scope="col">Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Monday</th>
      <td>Structure</td>
      <td>35 minutes</td>
    </tr>
  </tbody>
</table>

Use ol when order matters and ul when it does not.
Match three headers with three cells in every row.
Keep the caption because it names the comparison.
Add today's row with a row header.

Read the important lines

Every list item is an li.
tr is a row, th a header, and td data.
scope connects a header to its row or column.

Common mistakes and what to check

Symptom	What to check
Table used for page columns	Use CSS for visual layout.
A row has too few cells	Match every row to the header count.
Caption missing	Name what the data compares.

Practice without copying

Add an unordered Resources list and a Completed table column.

Check the answer after you try

Use ul; every row becomes four cells and the new header uses scope="col".

Completion check

My page contains the required new content
I can explain the key tags or attributes without the answer
I deliberately created and fixed at least one error