Complex Tables and Spanning Cells

The colspan and rowspan attributes let a cell cover more than one column or row. They are useful for grouped headers or a small schedule, but too many merged cells can make a table difficult to navigate.

<table>
  <caption>Workshop timetable</caption>
  <tr>
    <th scope="col">Time</th>
    <th scope="col" colspan="2">Track</th>
  </tr>
  <tr>
    <th scope="row">10:00</th>
    <td>HTML basics</td>
    <td>CSS basics</td>
  </tr>
</table>

For more complex tables, a data cell may need to reference multiple header cells. The id and headers attributes can explicitly associate a cell with relevant headers. Use this only when simple row and column headers are not enough.

If a table has many levels of headers, merged cells, and irregular groupings, consider whether the data can be split into two simpler tables. A screen reader user should not need to remember a complicated map of headers while moving between cells. Do not use colspan just to create empty space; styling belongs in CSS.