How to Create Accessible Tables
 | page 1 | page 2 | page
3 | 
Here is a summary of the techniques for creating
accessible tables:
Creating Accessible Tables
- Layout Tables:
- Ensure that the contents of the table make sense when linearized
(i.e. when removed from the table).
- Do not use table headers (
<th> tags) for
visual effect.
- Use proportional sizing, rather than absolute sizing.
- Use the simplest table configuration possible.
- Data Tables
- Designate row and column headers using the
<th>
tag.
- Associate the data cells with the appropriate headers.
- Use proportional sizing, rather than absolute sizing.
- Provide names or titles for data tables using the
<caption>
tag.
- Provide summaries using the
summary attribute.
- Avoid spanned rows or columns.
- Avoid tables with more than two levels of row and/or column
headers.
The uses of tables
There are two basic uses for tables on the Web: as data tables, and as
layout tables. The original intended use of HTML tables was for data.
A table is a data table when row headers, column headers, or both are
present. For example, here is a simple data table:
Shelly's Daughters
| Name |
Age |
Birthday |
| Jackie |
5 |
April 5 |
| Beth |
8 |
January 14 |
In practice, tables are perhaps most commonly used for page
layout. Layout tables do not have logical headers that can be mapped to
information within the table cells. Here is a simple layout table:
| |
| |
 |
"Those who love deeply never grow old; they
may die of old age, but they die young."
"Hide not your talents. They for use were made. What's a sundial
in the shade."
"Blessed is he who expects nothing, for he shall never be disappointed."
"If a man empties his purse into his head, no man can take it
away from him. An investment in knowledge always pays the best
interest."
"When you're finished changing, you're finished."
-- Benjamin Franklin |
|
| |
Let's take a closer look at the techniques for making these two types
of tables accessible.
| page 1 | page 2 | page
3 |
Top
of Page || Return
to Tutorials List
|
