Practice: add a learning table

Add a small learning log to your page.

This is tabular data because every entry has the same two fields: a topic and a status.

<table>
  <caption>HTML learning log</caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Document structure</th>
      <td>Complete</td>
    </tr>
    <tr>
      <th scope="row">Links</th>
      <td>Complete</td>
    </tr>
    <tr>
      <th scope="row">Images</th>
      <td>Practicing</td>
    </tr>
  </tbody>
</table>

Change the rows to reflect what you learned.

Do not use a table to position unrelated content in columns. This table works because each row describes one topic using the same fields.

Run a basic accessibility pass

Now inspect the whole page:

1. Read only the headings. Check their order.
2. Confirm that the page has one main element.
3. Check that every informative image has useful alternative text.
4. Press Tab and follow the focus through every link.
5. Zoom the page to 200 percent and make sure nothing important disappears.
6. Inspect the table and confirm its caption and headers are exposed.

Fix one issue at a time. Reload after each change.

Done when

The table makes sense without visual styling and you can use every interactive part of the page with the keyboard.