How can columns and rows of a table be spanned?

Had enough of tables yet? Let's do another example that takes advantage of everything you've learned here: tables that use colors, headings, normal cells, alignments, and column and row spans. This is a very complex table, so we'll go step-by-step, row by row, to build it.

Figure 8.22 shows the table, which indicates service and adjustment specifications from the service manual for a car.

Figure 8.22. The really complex service specification table.

There are actually five rows and columns in this table. Do you see them? Some of them span columns and rows. Figure 8.23 shows the same table with a grid drawn over it so that you can see where the rows and columns are.

Figure 8.23. Five columns, five rows.

With tables such as this one that use many spans, it's helpful to draw this sort of grid to figure out where the spans are and in which row they belong. Remember, spans start at the topmost row and the leftmost column.

Ready? Start with the framework, just as you have for the other tables today:

  Service Data    Drive Belt Deflection   

To enhance the appearance of the table, you'll make all the cells light yellow (#ffffcc) by using the background-color property. The border will be increased in size to 5 pixels, and you'll color it deep gold (#cc9900) by using the bordercolor attribute that's compatible with both Netscape and Internet Explorer. You'll make the rules between cells appear solid by using a cellspacing setting of 0, and increase the white space between the cell contents and the borders of the cells by specifying a cellpadding setting of 5. The new table definition now looks like the following:

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 a bit tricky for screen readers, especially in complex data tables. And in general: keep your tables simple.

• Tricky screen reader navigation
• What does this mean for developers?

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 sigle one (Dancing) spans two rows using rowspan.

Navigate the table with a screen reader using table navigation. Do you notice any possible problems?

Table spanning multiple rows and columns

Show HTML code

Show CSS code

+

✔ (pass)

+

✔ (pass)

<table>
  <caption>My Week Schedulecaption>
  <thead>
    <tr>
      <th>th>
      <th colspan="5">
        Work Days
      th>
      <th colspan="2">
        Leisure Days
      th>
    tr>
    <tr>
      <th>
        Hour
      th>
      <th>
        Monday
      th>
      <th>
        Tuesday
      th>
      <th>
        Wednesday
      th>
      <th>
        Thursday
      th>
      <th>
        Friday
      th>
      <th>
        Saturday
      th>
      <th>
        Sunday
      th>
    tr>
  thead>
  <tbody>
    <tr>
      <th>
        9:00
      th>
      <td>
        Sports
      td>
      <td>
        German
      td>
      <td>
        English
      td>
      <td>td>
      <td>
        German
      td>
      <td rowspan="2">
        Dancing
      td>
      <td>
        Sleeping
      td>
    tr>
    <tr>
      <th>
        10:00
      th>
      <td>
        Chemistry
      td>
      <td>
        Sports
      td>
      <td>td>
      <td>
        Physics
      td>
      <td>
        Computer Science
      td>
      <td>
        Chillout
      td>
    tr>
  tbody>
table>

table {
  border-collapse: collapse;
}

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

CategoryResultCommentsDateKeyboard only✔ (pass) pass-2018-4-17NVDA 2018.1 + FF Quantum 59.0.2✔ (pass) pass-2018-4-17JAWS 2018.3 + IE 11✔ (pass) pass-2018-4-23JAWS 2018.3 + FF ESR 52.7.3✔ (pass) pass-2018-4-17

Well, most of the table is announced very well by the screen reader. But as soon as cells span multiple rows or columns, it is getting a bit tricky - if not to say: confusing.

Tricky screen reader navigation

The first thing to note is that NVDA does not announce when a cell spans multiple rows or columns! For example, the header cell "Work Days" (which spans 5 columns) is simply announced as "column 2 Work Days", and the next cell "Leisure Days" (which spans 2 columns) is announced as "column 7 Leisure Days". Did you notice the jump from 2 to 7? You have to be a pretty focused user to realise this.

The same holds true when navigating vertically. For example, when navigating from "Saturday" down to "Dancing", there is no hint by the screen reader that "Dancing" spans both "9:00" and "10:00", it only announces "9:00 row 3 Dancing". As there is no subsequent row (if it existed, it would be announced as "row 5", again with a jump from 3 to 5), not even vigilant users have the chance to realise by accident that "Dancing" spans 2 rows.

And one last thing to note: finding the cell "Chillout" is not that easy using a screen reader! If you are on the last row ("10:00") and then navigate from "Computer Science" rightwards to "Dancing" and then again to the right, then you will end on "Sleeping" which in fact is one row above! Sure, the screen reader announced the jump from row 4 to row 3 when coming to "Dancing", but still you have to be very vigilant to realise. So in fact, you only are able to reach "Chillout" by navigating down from "Sleeping".

What does this mean for developers?

In our opinion, this all clearly are shortcomings of screen readers, as the HTML code is perfectly clean and unambiguous - and tables are a feature that exists for decades already! Still, we advise not to overuse rowspan and colspan and to keep data tables simple - in the end, all users will be thankful.

What is spanning in tables?

Which command allows cells to span within several rows columns?

What is spanning row?

How are table rows and column defined?