As Web developers cannot control how their pages are viewed, tables need to be understandable when viewed in different resolutions or on different systems (e.g., screen readers, Braille displays, or palmtops).
People using screen readers, palmtops, or other devices, or people viewing only a portion of the page at a time (e.g., when using screen magnification or low-resolution) may have difficulty accessing information from pages with tables. Marking up tables properly provide these technologies with the appropriate information to support navigation in table cells and to access header and other table cell information.
Tables should be used to mark up truly tabular information (data tables) and, when possible, should be avoided to lay out pages (layout tables).
1. Identify table headersThe following example combines several solutions discussed in this question:
| Completed Program | Receiving Institution | Program | Credit |
|---|---|---|---|
| Biomedical Engineering | Raven University | Bachelor of General Sciences | Up to 60 credits |
| Forestry Technology | Rainbow Institute | Biological Sciences | 55 credits |
The code for the above table is:
<TABLE border="1" summary="This table charts the completed program, the receiving institution, the program, and the credit received.">
<CAPTION>Block transfer for Eagle University</CAPTION>
<TR><TH id="header1" ABBR="Completed">Completed Program</TH>
<TH id="header2">Receiving Institution</TH>
<TH id="header3">Program</TH>
<TH id="header4">Credit</TH></TR>
<TR><TD headers="header1">Biomedical Engineering</TD>
<TD headers="header2">Raven University</TD>
<TD headers="header3">Bachelor of General Sciences</TD>
<TD headers="header4">Up to 60 credits</TD> </TR>
<TR><TD headers="header1">Forestry Technology</TD>
<TD headers="header2">Rainbow Institute</TD>
<TD headers="header3">Biological Sciences</TD>
<TD headers="header4">55 credits</TD></TR>
</TABLE>
A screen reader might read this table as follows:
Summary: This table charts the completed program, the receiving institution, the program, and the credit received.
Caption: Block transfer for Eagle University
Completed: Biomedical Engineering, Receiving Institution: Raven University, Program: Bachelor of General Sciences, Credits: Up to 60 credits
Completed: Forestry Technology, Receiving Institution: Rainbow Institute, Program: Biological Sciences, Credits: 55 credits
2. Associate data cells with headersLabeling table elements with the SCOPE or HEADER and the AXIS attributes will enable future browsers and assistive technologies to select data from a table by filtering categories.
For example, in this table there are three axes: funding, location, and program.
| Funded by Federal Government | Funded by Provincial Government | |
|---|---|---|
| Region A | ||
| Self-employment Program | 25 | 2 |
| Training Programs | 6 | 12 |
| Region B | ||
| Self-employment Program | 36 | 4 |
| Training Programs | 4 | 26 |
The code for the above table is:
<TABLE border="1" SUMMARY="This table compares the number of self-employment and training programs in regions A and B funded by the federal and provincial governments">
<CAPTION>Comparison by Region of Government Funding for Programs </CAPTION>
<TR>
<TH></TH>
<TH id="header2" axis="funding" abbr="Federal">Funded by Federal Government</TH>
<TH id="header3" axis="funding" Abbr="Provincial>Funded by Provincial Government</TH>
</TR>
<TR>
<TH id="header4" axis="location">Region A</TH>
<TH></TH>
<TH></TH>
</TR>
<TR>
<TD id="header5" axis="program">Self-employment Program</TD>
<TD headers="header4 header5 header2">25</TD>
<TD headers="header4 header5 header3">2</TD>
</TR>
<TR>
<TD id="header6" axis="program">Training Programs</TD>
<TD headers="header4 header6 header2">6</TD>
<TD headers="header4 header6 header3">12</TD>
</TR>
<TR>
<TH id="header7" axis="location">Region B</TH>
<TH> </TH>
<TH> </TH>
</TR>
<TR>
<TD id="header8" axis="program">Self-employment Program</TD>
<TD headers="header7 header8 header2">36</TH>
<TD headers="header7 header8 header3">4</TH>
</TR>
<TR>
<TD id="header9" axis="program">Training Programs</TD>
<TD headers="header7 header9 header2">4</TD>
<TD headers="header7 header9 header3">26</TD>
</TR>
</TABLE>
A screen reader may read the table as follows:
Summary: This table compares the number of self-employment and training programs in regions A and B funded by the federal and provincial governments
Caption: Comparison by Region of Government Funding for Programs
Region A, Self-employment Programs, Federal: 25, Provincial: 2
Region A, Training Programs, Federal: 6, Provincial: 12
Region B, Self-employment Programs, Federal: 36, Provincial: 4
Region B, Training Programs, Federal: 4, Provincial: 26
3. Avoid tables for layout For example:
|
Welcome to Career Corner! |
|
|
Navigation link 1 Navigation link 2 Navigation link 3 Navigation link 4 |
Banner Ad |
Main content area filling the center part of the window. |
|
This simple table produces the following text when unstacked or linearized:
Welcome to Career Corner!
Navigation link 1
Navigation link 2
Navigation link 3
Navigation link 4
Banner Ad
Main content area filling the center part of the window.
TIP A simple way of viewing a page in linear form is to view it in the Lynx text browser. The Lynx viewer at http://www.delori.com/web/lynxview.html provides a rendering of the page as if the browser were Lynx.
4. Avoid structural markup for formatting
5. Provide table summariesFor example:
<TABLE border="1" summary="This table charts the completed program, the receiving institution, the program, and the credit received.">
<CAPTION>Block transfer for Eagle University</CAPTION>
6. Abbreviate long headersFor example:
<TR><TH id="header1" ABBR="Completed">Completed Program</TH>
The bottom line, as stated in WCAG Guideline 5, is ensure tables have necessary markup to be transformed gracefully by assistive devices.