Challenge · medium
HTML Table Challenge: caption, thead, rowspan, colspan
Goal: Give a flat timetable a caption, real header cells and merged cells.
Learn
In a well-built data table, a screen reader can say what every cell means. The table's title goes in a <caption>, which must be the first child of the table according to the caption section of the HTML standard (opens in a new tab). Column headers sit in a <thead> as <th scope="col">. Row headers are <th scope="row">.
If one value repeats across several cells, merge them. rowspan="2" makes a cell two rows tall; colspan="2" makes it two columns wide. Then remove the cells the big one now covers. Forget that step and the row has a cell too many, so everything after it slides sideways. The HTML standard's rules for colspan and rowspan (opens in a new tab) spell out how the cells are counted.
The short version
- A title paragraph becomes a
<caption>, and bold cells become real<th>headers. - The header row lives in
<thead>; row labels getscope="row". - Repeated values merge into one cell with
rowspanorcolspan. - Then count: every row must come to the same number of columns.
Example
<table>
<caption>Lunch rota</caption>
<tr>
<th scope="col">Day</th>
<th scope="col">Cook</th>
<th scope="col">Wash up</th>
</tr>
<tr>
<th scope="row">Mon</th>
<td colspan="2">Sam</td>
</tr>
</table>Your task
Rebuild the weekend workshop table:
- Swap the paragraph above the table for a
<caption>containing 'Weekend Workshop'. - Move the first row into a
<thead>and change its cells to<th scope="col">. Delete every<b>tag. - Turn the three times into row headers with
<th scope="row">. - 'Build Day' covers Sunday at 10:00 and 12:00. Make it a single cell with
rowspan="2". - 'Show and Tell' covers both days at 14:00. Make it a single cell with
colspan="2". - Remove the cells the merged ones replace, leaving 4 data cells in the body.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
What is thead and tbody in HTML?
They are row groups. <thead> holds the header rows of a table, <tbody> holds the data rows, and <tfoot> can hold totals. On screen they look like nothing by default. What they give you is structure you can see in the code, simple hooks for CSS, and a header row that browsers repeat on each printed page. Leave tbody out and the browser adds one anyway. The lesson on table headers and captions goes through all three.
How do I merge two cells in an HTML table?
Make one cell bigger and delete the other. colspan="2" merges two cells that sit side by side. rowspan="2" merges a cell with the one underneath, and you then remove the matching cell from the next row. Count every row when you are done; a spanned cell counts once for each column it covers. To check your counting, try a visual HTML table generator (opens in a new tab): you merge cells with the mouse and it shows you the code.