Before this lesson

Understand nesting and lists, and choose data that benefits from row-and-column comparison.

What you will be able to do

Build a table with a caption and row and column headers, and decide when tabular data is more appropriate than cards.

Understand the mechanism

A table is valuable because cells are interpreted through both rows and columns, not because it draws borders. A cell containing 4 means little until its column identifies it as four lessons. caption names the table, th marks a header and td marks data. thead and tbody group rows but do not replace header relationships.

For simple tables, scope="col" identifies a column header and scope="row" a row header. Spanning cells complicate relationships, so use rowspan and colspan only when the information requires them. Splitting a complex comparison into several named tables can be clearer than building increasingly elaborate merged headers.

Runnable example

<table>
  <caption>Weekly learning plan</caption>
  <thead><tr><th scope="col">Topic</th><th scope="col">Sessions</th></tr></thead>
  <tbody>
    <tr><th scope="row">HTML</th><td>3</td></tr>
    <tr><th scope="row">CSS</th><td>4</td></tr>
  </tbody>
</table>

Trace and verify

Run the fragment in the body and inspect its structure before styling. Check the number of cells in every row. Add a practice-goal column with a value for each course. Inspect the table’s accessible name and confirm that it comes from the caption rather than an unrelated nearby paragraph.

Common mistakes and boundaries

Do not use tables for general page columns; use CSS layout. Making every cell a td and bolding some of them loses header semantics. When a data table cannot fit a narrow screen, allow its container to scroll independently instead of forcing the entire page to overflow.

Practice challenge

Add lesson-count and completion-status columns for three courses. Explain why completion must not be represented only by red and green dots.

Reference solution and reasoning

Include status text such as Completed or In progress; color is supplementary. Keep the course name as a row header and each property as a column header. A user can then understand that CSS is in progress without inferring meaning from color.

Further reading