Tables

HTML tables on the Web come in two varieties, layout tables and data tables. Data and layout tables need to be designed differently in order to increase their accessibility. Presently, all tables are read in a linear manner by screen readers. When a Web page is loaded, the screen reader starts reading from the top left side of the page, and goes through the entire page in a logical, linear order. Screen readers do not look at what is visually displayed on the screen. Instead, they look at the code of each page.

Layout tables should be used with caution and avoided if possible. Instead, Cascading Style Sheets (CSS) and the <DIV> element can be used to properly position most items on a page. If layout tables are used, Web developers must ensure that the content and page hierarchy can linearize in a readable order.

Data tables must also linearize properly, which can be an added challenge for Web developers. Understanding the positioning of the data in each cell is dependent upon supplemental information in column and row headings. This spatial arrangement requires specific HTML techniques to ensure that the data can still be interpreted without the presence of table structure.

REQUIRED:

Row and column headers shall be identified for data tables. [Section 508, Part 1194.22, Paragraph (g)]

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. [Section 508, Part 1194.22, Paragraph (h)]

Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [W3C WCAG 1.0, Checkpoint 5.3, Priority 2]

If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [W3C WCAG 1.0, Checkpoint 5.4, Priority 2]

The following markup and design techniques are required:

1. Avoid the use of tables for structural layout of the page whenever possible.
   
   
2. Designate row and column headers using the <TH> element.
   
   
3. Associate data cells with the appropriate header elements using the SCOPE, HEADERS, ID, and/or AXIS attributes.
   
   A choice between the HEADERS and SCOPE attributes is dependent on the complexity of the table. Typically, the HEADERS and ID method should only be used when there is more than one logical level in a table, and when it is necessary to link more than two headers with a data cell. It does not affect the output so long as the relationships between header and data cells are made clear in the markup.
   
   
4. Identify structural groups of rows using the <THEAD> element for repeated table headers, the <TFOOT> element for repeated table footers, and the <TBODY> element for other groups of rows. Identify groups of columns using the <COLGROUP> and <COL> elements.
   
   
5. Provide names or titles for data tables using the <CAPTION> element.
   
   
6. Avoid tables with more than two levels of row and/or column headers.
   
   
7. Do not use any of the above structural markup techniques for layout tables.
   
   
8. Avoid spanned rows or columns.
   
   
9. Use proportional sizing, rather than absolute sizing.
   
   
10. Use Cascading Style Sheet (CSS) references for the visual presentation and positioning of elements in your tables. Ensure that tables are understandable and accessible when viewed in a linear layout.
    
    

RECOMMENDED:

Provide summaries for tables. [W3C WCAG 1.0, Checkpoint 5.5, Priority 3]

The SUMMARY attribute of the <TABLE> element is not supported by all assistive technology devices. Nonetheless, it is an easy feature to include. However, it is not a substitute for proper table markup, or for including a helpful summary within the text of the body of the page.

EXAMPLE:

For this simple data table, the SCOPE="col" and SCOPE="row" attributes are sufficient. The table uses proper HTML markup by designating table headers <TH>, table rows <TR>, and table data cells <TD>. It includes a brief summary attribute, a caption element, and the table width is using proportional/percentage sizing rather than absolute.

When this table is read in a linear fashion, it appears as this:

YEAR ISSUED
NUMBER OF TICKETS PAID
MONEY COLLECTED
Pre-1991
1,679
$46,524
1991
90
$1,003
...

Below is the code for this table:

<table width="75%" border="0" cellspacing="0" cellpadding="6" align="center" summary="this table shows the results of the amnesty program by year, number of tickets paid, and amount collected">

<caption>Tickets Paid During 2003 Amnesty</caption>
<tr>
<th scope="col">YEAR ISSUED</th>
<th scope="col">NUMBER OF TICKETS PAID</th>
<th scope="col">MONEY COLLECTED</th>
</tr>

<tr class="1">
<td scope="row">Pre-1991</td>
<td>1,679</td>
<td>$46,524</td>
</tr>

<tr class="2">
<td scope="row">1991</td>
<td >90</td>
<td>$1,003</td>
</tr>

<tr class="1">
<td scope="row">1992</td>
<td>90</td>
<td>$1,250</td>
</tr>

<tr class="2">
<td scope="row">1993</td>
<td>88</td>
<td>$1,442</td>
</tr>

<tr class="1">
<td scope="row">1994</td>
<td>149</td>
<td>$4,220</td>
</tr>

<tr class="2">
<td scope="row">1995</td>
<td>165</td>
<td>$3,275</td>
</tr>

</table>


Because of the general complexity of tables and the acceptable range of stylistic preferences, Web developers are advised to read more about this subject from the resources listed below.