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

Next lesson: Challenge - Validated form

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies