Summary - Comparison table
Write a product comparison table applying all table techniques.
Five techniques in summary
In this group we took tables further. We combined five techniques:
<colgroup>and<col>bridge shared styling to columnsscopeandheaders+idlink headers for accessibility<caption>andaria-*introduce the table- a wrapper div enables small-screen fit
- caption, colgroup, thead, tbody, tfoot form the visual order
Now you will merge all of them in one comparison table.
Exercise Write a full comparison table
Write a comparison table that applies all table techniques. Put a non-empty <caption> inside <table>. After caption add a <colgroup> with one <col> and one <col span="2">. Then in <thead> place three <th>; give each scope="col" and an id. In <tbody> add at least two rows; each row's first cell is a <th> with scope="row", the other cells are <td> whose headers attribute points to the relevant th ids. End the table with <tfoot>.
Show example solution
<table>
<caption>Phone Comparison — 2026</caption>
<colgroup>
<col>
<col span="2">
</colgroup>
<thead>
<tr>
<th scope="col" id="feature">Feature</th>
<th scope="col" id="model-a">Model A</th>
<th scope="col" id="model-b">Model B</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="weight">Weight</th>
<td headers="weight model-a">180 g</td>
<td headers="weight model-b">195 g</td>
</tr>
<tr>
<th scope="row" id="screen">Screen</th>
<td headers="screen model-a">6.1 in</td>
<td headers="screen model-b">6.7 in</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" id="result">Result</th>
<td headers="result model-a">Light</td>
<td headers="result model-b">Wide screen</td>
</tr>
</tfoot>
</table>Test yourself
-
Match each technique to its role
- colgroup
- Column styling bridge
- headers+id
- Complex header binding
- aria-describedby
- Links table to description
- Wrapper div
- Small-screen scrolling
-
What is the best practice for a column header in a comparison table?
- Give the th scope="col" and an id
- Give the td scope="col"
- Skip thead
- Drop colgroup
Show answer
Give the th scope="col" and an id — Correct. Giving the th both scope="col" and an id maximises accessibility.