How you prepare a table for the Web depends on the kind of table. Data tables have rows and columns of data, like a bus schedule or a periodic table of elements. Layout tables simply position things on the page, making columns for text, navigation bars and banners. With data tables, HTML can associate header cells with data cells so someone who can’t see can navigate the data. With both data and layout cells, it’s important to make sure a screen reader will speak the content in the right order.
You may use tables on Web pages either to display rows and columns of data, like a spreadsheet or timetable, or to control the visual layout of text, images and other elements on a page. In either case, make sure your page makes sense when read one table cell at a time, left to right across each row:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| To be, | or not to be, |
| that is | the question. |
| To be, | that is |
| or not to be, | the question. |
For simple data tables, like the one below, put column labels in the top row and row labels in the left column. Make the cells that contain the row and column headings into table heading cells, if that’s possible with your authoring program. Most screen readers have a table-reading mode that can associate these labels with the data cells.
| A | B | C | D | E | F | G | |
|---|---|---|---|---|---|---|---|
| Cross-Fisher | 13.9 | 17.0 | 18.7 | 10.5 | 14.2 | 14.5 | 11.2 |
| Missoula | 8.9 | 10.0 | 23.3 | 13.3 | 8.9 | 20.0 | 15.6 |
| New Zealand | 8.0 | 13.0 | 17.0 | 8.0 | 27.0 | 13.0 | 13.0 |
| Hunter | 11.8 | 16.0 | 22.3 | 8.5 | 8.4 | 12.1 | 20.9 |
| Madison | 3.8 | 8.3 | 29.8 | 4.1 | 5.1 | 33.4 | 23.3 |
| Average | 9.3 | 12.9 | 22.2 | 8.9 | 12.7 | 18.6 | 16.8 |
If you read the data table above with a screen reader you could use the arrow key to move down the C column. The screen reader software would say “Cross-Fisher 18.7, Missoula 23.3, New Zealand 17.0,” etc. If you then pressed the right arrow key to move one cell over in the New Zealand row, the software would say “D 8.0.” For this to work, the labels must be in the top row and/or left column. Or the labels must be associated with the cells using special markup. Be sure to put the table’s title outside the table, not within a cell that’s part of the table. Otherwise, a screen reader might mistake the title for a column heading.
More complex data tables that have multiple levels and subheadings require special markup to make sure the headings get associated with the right cells. For help with these, see the Section 508 Standards or contact a Web designer at the Center for Teaching and Learning.
Be sure you include enough information to help someone who can't see make sense of a table. You can describe the table in your main text or in the table’s title, for example. If there are patterns that would be obvious to someone who could see your table, but not so obvious to some who can’t, you may write a description on a separate page and connect it with a “D” link. That is, at the end of your table title, type a capital “D” and link that letter to your description page.
You can use “D” links whenever you need to add extra description so someone who can’t see can understand your message. However, with special HTML tags you can embed into a table an invisible description, a “summary,” that can be read by screen readers. Again, the Standards or a CTL Web designer can help you with that.
When you are using tables just to position things on the page, avoid using heading cells or any other code designed to associate headings with cells. Otherwise, a screen reader encountering that markup may try to read your layout as if it was a data table, calling out headings where there aren’t supposed to be any.
Ideally, we would use tables only for data and use style sheets for layout. Browser support for positioning with style sheets is still a little inconsistent, though. This is beginning to change, but most Web designers continue to use tables for layout. For tips on table layouts, see the “Visual formatting” page.