Crawford Design

Logo

Tables

About Tables

Layout Tables verse Data Tables

Never use tables for presentation and layout. A CSS based layout should be used for all web pages. Screen readers can handle a CSS based layout much better than a table based layout. Tables should only present data like financial results, rainfall totals or bus schedules.

How Tables Linearize

Below is a very simple table with two coumns and three rows. The numbers indicate the order in which the table contents are read by a screen reader. Screen readers all start with the first row, completely read each cell there (including nested tables), and then proceeds to the next row. This method of reading the contents of a table is called linearization.

1 2
3 4
5 6

Simple Data Tables

The meaning of the data in most cells of a table depends on heading information, which is usually in the first row and the first column of the table. You cannot know what the data means unless you are aware of the corresponding headings.

In the table below, a screen reader will announce the row and column headers as they change. So as you move across the March row, you should hear something like "Year, 1978, Collingswood, 2.2, Haddonfield 2.6, Westmont, 2.78." Moving down the Haddonfield column, you should hear something like "January, .35, February, 1.5, March, 2.6.

First Quarter 1978 Rainfall Totals in Camden County
Month Year Collingswood Haddonfield Westmont
Jan 1978 .25 .35 .15
Feb 1978 1.6 1.5 1.3
Mar 1978 2.2 2.6 2.78

The data table above is considered a simple table because it satisfies two conditions:

Simple tables, like the one above, speak properly with a screen reader if you identify the row and column headers of the table. To identify a row or column header use the th (table header) element for all header cells. In addition, it is recommended that you use the scope attribute on the th: scope="row" if it is a row header cell, and scope="col" if the cell is a column header. Please view the source of this page to see the correct table markup of the rainfall table.

Layered Data Tables

Layered data tables are a bit more complicated than simple data tables and should be avoided because they can be confusing to people using screen readers. They have the property that, for any data cell, heading cells are always in the same row and column as the data, but there is more than one heading cell in the data cell's row or column. This characterization needs to take spanning into account. Data in a spanned cell is viewed as existing in all the cells it spans. For example, in the table below, Baking Time occurs in row 1, columns 2 and 3, while Cooling Time appears in row 1, columns 4 and 5.

Cake Baking Times and Temperatures (Fahrenheit)
  Baking Time Cooling Time
Cake Pan 350° 400° 68° 80°
Three 8 inch round 40 Minutes 35 Minutes 1.5 Hours 2 Hours
Two 9 inch round 50 Minutes 40 Minutes 3 Hours 4 Hours
9 by 13 inch 50 Minutes 40 Minutes 3 Hours 4 Hours
Two 8 inch square 50 Minutes 40 Minutes 2 Hours 3 Hours

The accepted techniques for specifying which heading cells apply to which data cells is called headers/id markup. Each heading cell is given an id, and each has cell has a string of ids that are its headers. View the page source to see the markup for the layered table.

Irregular Tables

An irregular data table is a table with header information that is not in the same row or column as the data. Avoid building irregular tables. Information should be simplified and reorganized into a simple data table or another format. An example of an irregular data table is the expense report table below.

Notice how most numeric values in the table depend on a row header (date) and a column header (type of expense), plus the information as to the city where the expense occurred and this information is not in the same row and the same column as the data. The first expense entry, 37.74, in row 3, column 2, has the heading San Jose in row 2, column 1, in addition to the date (25-Aug-97) and the expense type (Meals).

In this irregular table heading information for a data cell occurs in cells that are not in the row or column of the data. Irregular tables require headers/id markup to make them accessible (view the page source to see the markup).

Travel Expense Report
Meals Hotels Transport Subtotal
San Jose
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
Subtotals 65.02 224.00 90.00 379.02
Meals Hotels Transport Subtotal
Seattle
27-Aug-97 96.25 109.00 36.00
28-Aug-97 35.00 109.00 36.00
Subtotals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

Another issue with the table above is that it contains too many empty cells. In Internet Explorer empty table cells need a nonbreaking space placed in them for the cell formatting, like borders, to show up. Table cells should only have useful content in them, they shouldn't be filled with whitespace or a nonbreaking space to achieve a visual effect.

There is a style that allows empty table cells to display borders without a nonbreaking space. Unfortunately that style is not supported in Internet Explorer.

table { empty-cells: show; }

Caption and Summary

Caption Element

The rainfall table below has the caption element—First Quarter 1978 Rainfall Totals in Camden County—which appears as a title (or caption) for the table. This could be placed on the page as a header, but when you use the caption element, you are programmatically connecting the table and its caption. The use of a caption is not required.

First Quarter 1978 Rainfall Totals in Camden County
Month Year Collingswood Haddonfield Westmont
Jan 1978 .25 .35 .15
Feb 1978 1.6 1.5 1.3
Mar 1978 2.2 2.6 2.78

Summary Attribute

The purpose of the summary attribute on the table element is to give a visually impaired user the kind of table structure overview that a sighted user gains by scanning the table. The Summary for the table above is:

table class="chart5" cellspacing="0" cellpadding="0" width="400" border="0" summary="Monthly rainfall totals in inches"

Below is the wrong kind of summary because it presents too much information about the table:

table class="chart5" cellspacing="0" cellpadding="0" width="400" border="0" summary="Rainfall totals for January, February and March of 1978 in Collingswood, Haddonfield and Westmont New Jersey."

The summary attribute is required and available to screen readers only.

Data Tables: tbody, tfooter, thead

The thead, tfoot, and tbody elements enable you to group rows in a table. The thead element is used at the top of a table to define a header row(s). The tfooter element is used at the bottom of a table to define a footer row(s). The tbody tag is used to define the body of your table. The tbody element can be used multiple times to format and group rows together. In the table below the tbody element is used to group and color code 3 sets of rows (view the page source to see the markup). When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

If you use the thead, tfoot and tbody elements, you must use all three elements. They should appear in this order: thead, tfoot and tbody. The tfoot will render at the bottom of the table. You must use these tags within a table.

First Quarter 1978 Rainfall Totals in Camden County
Month Year Collingswood Haddonfield Westmont
Total 1978 8.57 9.07 8.34
Jan 1978 .25 .35 .15
Feb 1978 1.6 1.5 1.3
Mar 1978 2.2 2.6 2.78
Apr 1978 .27 .39 .11
May 1978 1.9 1.52 1.36
June 1978 2.35 2.71 2.64

The thead, tfoot, and tbody elements can be used to format accessible data tables to look less like data tables. This is an example of a table formatted with CSS that is taking advantage of the thead, tfoot and tbody elements. When the styles are removed you can see all the necessary information is in a nice small accessible table.

References

Top