Spanning multiple rows and columns

Spanning rows and columns is a standard HTML feature and exists for decades already. Be sure not to overuse them though, as they can be tricky for screen readers, especially in complex data tables. And in general: keep your tables simple.

Take a look at the following data table example showing a week schedule. It groups work days and leisure days together using colspan. Also, while most data cells span exactly one row, a single one ("Dancing") spans two rows using rowspan.

To associate data cells with more than one row or column header, we use id and headers attributes. See WCAG technique H43.

Table spanning multiple rows and columns

Show HTML code

Show CSS code

✔ (pass) ,

✔ (pass)

<table>
  <caption>My Week Schedule</caption>
  <thead>
    <tr>
      <th></th>
      <th colspan="5" id="Work">
        Work Days
      </th>
      <th colspan="2" id="Leisure">
        Leisure Days
      </th>
    </tr>
    <tr>
      <th>
        Hour
      </th>
      <th id="Mon" headers="Work">
        Monday
      </th>
      <th id="Tue" headers="Work">
        Tuesday
      </th>
      <th id="Wed" headers="Work">
        Wednesday
      </th>
      <th id="Thu" headers="Work">
        Thursday
      </th>
      <th id="Fri" headers="Work">
        Friday
      </th>
      <th id="Sat" headers="Leisure">
        Saturday
      </th>
      <th id="Sun" headers="Leisure">
        Sunday
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        9:00
      </th>
      <td headers="Work Mon">
        Sports
      </td>
      <td headers="Work Tue">
        German
      </td>
      <td headers="Work Wed">
        English
      </td>
      <td headers="Work Thu"></td>
      <td headers="Work Fri">
        German
      </td>
      <td rowspan="2" headers="Leisure Sat">
        Dancing
      </td>
      <td headers="Leisure Sun">
        Sleeping
      </td>
    </tr>
    <tr>
      <th>
        10:00
      </th>
      <td headers="Work Mon">
        Chemistry
      </td>
      <td headers="Work Tue">
        Sports
      </td>
      <td headers="Work Wed"></td>
      <td headers="Work Thu">
        Physics
      </td>
      <td headers="Work Fri">
        Computer Science
      </td>
      <td headers="Leisure Sun">
        Chillout
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid;
  padding: 4px 8px;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2024-5-30
NVDA 2023.3 + Firefox	✔ (pass) pass	-	2024-5-30
NVDA 2023.3 + Chrome	✔ (pass) pass	-	2024-5-30
NVDA 2023.3 + Edge	✔ (pass) pass	-	2024-5-30
JAWS 2024 + Firefox	✔ (pass) pass	-	2024-5-30
JAWS 2024 + Chrome	✔ (pass) pass	-	2024-5-30
JAWS 2024 + Edge	✔ (pass) pass	-	2024-5-30

Due to limited screen reader support for more complex scenarios, it is generally recommended to be very careful with spanning table cells. See examples and test results in Adrian Roselli's post.

You are here:

Spanning multiple rows and columns

Previous/next navigation