H. Complex/Larger Tables

Checkpoint (H) states that markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

Complex and Larger Tables

The ideal way to make complex tables accessible is to break them into separate tables which have a single layer of headers. This allows the developer to use the simpler markup used in Checkpoint (G). If a complex table cannot be broken into separate tables, it will be necessary to add much more complex coding to the table than if it was a simple table. See the sections below for specific examples and techniques for complex table markup. Complex tables, i.e. where tables have more than one logical layer of header to data cell association, require additional markup to identify those additional layers of association.

Using the "scope" attribute is the simplest and most effective method of making a header to data cell association. The efficiency of using the scope attribute becomes more apparent in much larger tables. For instance, if an agency used a table with 20 rows and 20 columns, there would be 400 data cells in the table. To make this table comply with this provision without using the scope attribute would require adding special markup code in all 400 data cells, plus the 40 header and row cells. By contrast, using the scope attribute would only require special attributes in the 40 header and row cells.

Example 1 - Multiple Header Layers

The following table is much more complicated than the previous example in Checkpoint (G) and it demonstrates the use of the "scope" attributes in a multilevel header table.

The table in this example includes the work schedules for two employees. Each employee has a morning and afternoon work schedule that varies depending on whether the employee is working in the winter or summer months. The "summer" and "winter" columns each span two columns labeled "morning" and "afternoon." Therefore, in each cell identifying the work schedule, the user needs to be told the employee's name (Fred or Wilma), the season (Summer or Winter), and the shift (morning or afternoon).

 

Work Schedule
  WinterSummer
  MorningAfternoonMorningAfternoon
Wilma 9-11 12-6 7-11 12-3
Fred 10-11 12-6 9-11 12-5

 

 

For a comparison of using the scope or ID attribute see the Example 1 techniques.

Example 2 - Complex Header Layout

This example shows a travel expenses worksheet. While the following data table appears simple enough visually, it would be difficult to understand if read by some of today's screen-readers. A good way to approximate what some screen-reader users will hear is to hold a ruler to the table, and read straight across the screen. Then, move the ruler down until the next line of characters is displayed. Read straight across. After a while, pick a data cell at random and, without looking at the column or row title, try and remember what headers describe that data point. The larger and more complex the table, the harder it would be to remember the row and column relationships.

Travel Expenses (actual cost, US$)

TRIP
date

MealsRoomTrans.Total
San Jose
25 Aug 97 37.74 112.00 45.00
26 Aug 97 27.28 112.00 45.00
Subtotal 65.02 224.00 90.00 379.02
Seattle
27 Aug 97 96.25 109.00 36.00
28 Aug 97 35.00 109.00 36.00
Subtotal 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

View the HTML markup for example 2 that would correctly define cell to header relations with more than one logical layer of headers.

Example 3

Here is a real life example from the Countdown to the Missouri State Centennial web site. The site uses complex markup to make the Funding the five year plan data tables accessible. Here you can see the complex HTML markup for the site.

This page adopted from the Curriculum for Web Content Accessibility Guidelines 1.0, Copyright © 2000 W3C (MIT, INRIA, Keio), All Rights Reserved.