Table Basics

Welcome to our free Web Accessibility and Section 508 tutorial. This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers course.

Contact Us or call 1-877-932-8228
Table Basics

Table Basics

  • Two varieties of HTML tables on the web:
    • Layout tables - most common - linearize well
    • Data tables - do not linearize well
  • Data tables present data such as:
    • Financial results
    • Rainfall totals by city and month
    • TV listings
    • Bus Schedules
  • In layout tables, information in the cells stands on its own
  • In data tables, headings are crucial for understanding the data

HTML tables on the web come in two varieties, layout tables and data tables.

There is no question that the vast majority of tables on the web are layout tables, used to structure the visual appearance of the page. Often the structure of tables is remarkably complex, with tables nested in tables as much as seven deep.

In the Navigation lesson we talked a little bit about how tables are read, or linearized, independently of how complex those tables are. At least the definition of the linearization algorithm is simple. Lay out the text a line at a time starting with the first cell of the first row; then move across the columns of the first row, then proceed to the second row, and so on. If you come to a table in that process, linearize it and then continue. Another description of linearzation is "source code order." If you look at the source code of a page, and remove all the table tags (<table>, <tr>, <td> <th>, etc.) then the resulting text is the linearized version of the table. Finally, if you want an easy technique to see the way tables are spoken, look at a site that uses tables for layout, and apply the Linearize function in the Tables menu of the web Accessibility Toolbar.

You should make sure that your pages make sense when linearized in this fashion. As we discussed earlier, one of the simplest views of your page in linear form is provided by the "Lynx view," a rendering of the page as if you were using the Lynx text browser. The Delorie software Lynx Viewer site provides you the opportunity of seeing your page as if the browser were Lynx. Or you can use the Web Accessibility Toolbar, Check > Lynx Viewer. Usually the page will make sense.

Unless, that is, one or more of your tables is really a data table, because, while layout tables usually linearize well, data tables do not.

So what are data tables? How are they distinguished from layout tables? Data tables present things like financial results, rainfall totals by city and month, TV listings or bus schedules. What do these have in common? What is common is that the meaning of data in most cells of the 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 contents of the corresponding headings.

For layout tables, information in various cells stands on its own. There are no headings - just table cells containing text and images. In contrast, headings are crucially important for understanding (or reading) data tables. That is the problem! Your tables must be designed and marked up in such a way as to ensure that assistive technology will know where the headings are and be able to announce them.

Think of a TV listing -- for example, TV Guide: Screen Shot of TV listings

Here is part of the text view of this table from IBM Home Page Reader, starting at the time indicator (and Heading), 7:30:

7:30 PM 8:00 PM 8:30 PM 2 KTBC American Juniors Paradise Hotel 3 KVUE George Lopez (Repeat) Drew Carey Drew Carey Dating Experiment> 4 KXAN <Fame Law & Order (Repeat) 5 KEYE <60 Minutes II Perfect Murder, Perfect Town (Repeat) 6 INFO <Information Channel Information Channel 8 HSN <24 Hour Jewelry Celebration 24 Hour Jewelry Celebration 9 KLRU <Ken Burns American Stories (Repeat) West Point (Repeat) 10 TBN International Intelligence Briefing Gaither Homecoming Jack Van Impe Presents

When you read this, you will find that important information, represented by the tabular structure, is lost. Because of spanned cells, there is no way to even guess the time slot for a program, even if you did remember the headings. Imagine searching for a program title and then trying to figure out at what time and on what channel it will be aired. Nearly impossible!

This financial data table from has similar problems. Just imagine starting to read this table in the middle. It is hard enough to remember the column headings, let alone keep track of them as you view numeric data one cell at a time.

Remember that visually you can quickly glance at row and column headers to understand a piece of data; you can't do that when you are reading the table linearly. screenshot of financial table

There are a number of constructs in HTML 4.0 that contribute to making data tables accessible, that contribute to making it possible to listen to and understand a table. These are thoroughly discussed in the Tables section of the HTML 4.0 document.

We will discuss the three most important techniques for giving assistance to those with disabilities who are trying to interpret tabular information.


This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.