Example

A workshop schedule with explicit headers

Build a small data table with a caption, column headers, and row labels that explain each topic cell.

Beginner2 min readLearn · Practice · Review

Published by HTML Code Runner · AI-assisted material · Independent editorial review pending · Editorial policy

On this page

Understand the source

The caption names the schedule. The thead contains column labels, while each tbody row begins with a row header for its day. Scope specifies whether a header applies along a row or a column. This makes the relationship between Monday and Links explicit in the source.

<table>
  <caption>Workshop schedule</caption>
  <thead><tr><th scope="col">Day</th><th scope="col">Topic</th></tr></thead>
  <tbody><tr><th scope="row">Monday</th><td>Links</td></tr>
  <tr><th scope="row">Tuesday</th><td>Forms</td></tr></tbody>
</table>

Expected output

The output displays two workshop rows. Borders and padding come from CSS; they are visual aids rather than the source of the table relationships. Removing the stylesheet should preserve a meaningful caption and cell structure. Making a td bold would not give it header semantics.

Make a deliberate change

Add a Wednesday row with the topic Accessible images. Then introduce a third column named Duration and give each row a value such as 45 minutes. Keep the effective cell count consistent and include the unit in the text so copied or spoken values remain understandable.

Review the behavior

At a narrow width, preserve readable text and allow appropriate horizontal scrolling. Do not use tables for the entire page layout. If grouped headers become difficult to follow, consider splitting the dataset before introducing a complex headers/ID association model.

Read the full explanation and expected output