Challenge - Accessible table
Write a finance table with colgroup, scope and headers.
Accessible table structure
An accessible table links headers to cells. <caption> holds the title, <colgroup><col> holds column styling. <thead>, <tbody> and <tfoot> split rows into logical regions.
Header cells declare direction with scope="col" or scope="row". In complex tables the headers attribute links a cell to related header ids. colspan and rowspan merge cells.
Exercise Write a finance table
Write a stock price table. Include a <caption>, a <colgroup> with at least two <col>, and <thead>/<tbody>/<tfoot> sections. Use scope on header cells and colspan or rowspan on at least one cell.
Show example solution
<table>
<caption>December 2026 stock prices</caption>
<colgroup><col><col><col></colgroup>
<thead>
<tr><th scope="col">Stock</th><th scope="col">Price</th><th scope="col">Change</th></tr>
</thead>
<tbody>
<tr><th scope="row">ACME</th><td>$142.50</td><td>+1.2%</td></tr>
<tr><th scope="row">GLOB</th><td>$512.00</td><td>+0.8%</td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">Average change: +1.0%</td></tr>
</tfoot>
</table>Test yourself
-
Which attribute links a data cell to a header id?
- headers
- scope
- colspan
- rowspan
Show answer
headers — Correct. headers links the cell to related th ids.
-
Column group
<table> ____ <tr><th>Stock</th><th>Price</th></tr> </table>Show answer
<table> <colgroup><col><col></colgroup> <tr><th>Stock</th><th>Price</th></tr> </table> -
scope values
- col
- column header
- row
- row header
- colgroup
- column group
- rowgroup
- row group