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.

Place the table inside main, near your learning section, so the caption matches the surrounding content.

If Tab skips a link, check for a missing href or an element covered by another layer. Keyboard testing catches problems that mouse testing hides.

When you inspect the table in the Accessibility pane, each data cell should reference its row and column headers. If not, check your th and scope values before adding more markup.

Strip borders and colors with a quick test: read the table aloud. If you cannot hear which topic each status belongs to, the header structure still needs work.

You are done when the table makes sense without visual styling and you can use every interactive part of the page with the keyboard.