Tables - Optimal Content Examples

Attention: For layout placement of non-tabular content, use the Grid System.

Table Of Contents

Introduction

A table is a mechanism for dividing tabular data into rows and columns. If it makes sense to present the data using a spreadsheet, then it is likely appropriate to present it using a table.

A table consists of:

  • <th> header cells, which indicate column and row headers

  • <td> data cells, which contain data.

  • Optional <caption> element.

Generic Table

Optional <caption>
<th> header cell <th> header cell <th> header cell
<th> header cell <td> data cell <td> data cell
<th> header cell <td> data cell <td> data cell

Note: The summary attribute is deprecated in HTML5, see alternatives: http://www.w3.org/TR/html5/tabular-data.html#table-descriptions-techniques

Coding Requirements

The following summarizes selected techniques from the Web Content Accessibility Guidelines (WCAG) 2.0 for satisfying the most common applicable success criterion related to this topic. Additional WCAG 2.0 success criterions, techniques, and failures not listed here may also be applicable depending on the content.

1. Header and Data Cell Association

Related to Success Criteria:

Every <td> data cell must be associated to one or more <th> header cells.

For simple tables, no additional coding is required. A simple table is one that meets all of these criteria:

  • All cells span exactly one row and one column.

  • All <th> header cells appear in the first row and/or column.

For all other tables (known as complex tables), it is strongly recommended that they be converted to one or more simple tables.

Simple Table Example

<th> <th> <th> <th> <th>
<th> <td> <td> <td> <td> <td>
<th> <td> <td> <td> <td> <td>
<th> <td> <td> <td> <td> <td>

Note: The Web Content Accessibility Guidelines (WCAG) 2.0 permit the use of the scope and headers attribute for header and data cell association in complex tables (Source: WCAG 2.0, Technique H43 and WCAG 2.0, Technique H63).

However based on actual testing, assistive technologies do not consistently implement these features and their use often introduces usability problems into a complex table. As a result, it is strongly recommended that all complex tables be converted to simple tables.

Refer: Table Usability

For information about structuring complex tables, see Table Usability.

2. Table Markup

Related to Success Criteria:

When content is tabular data (with associated rows and columns), it must be marked up accordingly using table markup.

Source: WCAG 2.0, Technique H51

3. Use Of Colour

See general web accessibility requirements for colour.

Content Examples

1. Basic columns

Current employees
Name Title Salary
Doe, Jane Manager $1296.41
Doe, John Director $1584.50
Smith, John Programmer Analyst $965.10
Total $3846.01
Source Code 
<table>
	<caption>Current employees</caption>
	<tr>
		<th>Name</th>
		<th>Title</th>
		<th>Salary</th>
	</tr>
	<tr>
		<td>Doe, Jane</td>
		<td>Manager</td>
		<td>$1296.41</td>
	</tr>
	<tr>
		<td>Doe, John</td>
		<td>Director</td>
		<td>$1584.50</td>
	</tr>
	<tr>
		<td>Smith, John</td>
		<td>Programmer Analyst</td>
		<td>$965.10</td>
	</tr>
	<tr>
		<th colspan="2" scope="row">Total</th>
		<td>$3846.01</td>
	</tr>
</table>

2. Financial

Statement of Financial Position (Unaudited) as of March 31, 2011 (in dollars and percentage)

Expenses
Dollars (2009) Percentage (2009) Dollars (2008) Percentage (2008)
Human Resources $1,442,421 14.89% $1,524,241 12.99%
Communications $677,325 6.99% $786,533 6.70%
Compensation $1,532,523 15.82% $1,678,235 14.30%
Information Technology $5,361,325 55.36% $6,836,643 58.27%
Administration $437,634 4.52% $563,235 4.80%
Other $233,353 2.41% $344,455 2.94%
Total $9,684,581 100.00% $11,733,342 100.00%
Revenues
Dollars (2009) Percentage (2009) Dollars (2008) Percentage (2008)
Administration $553,253 94.15% $735,235 93.13%
Other $34,352 5.85% $54,242 6.87%
Total $587,605 100.00% $789,477 100.00%
Totals
2009 2008
Net Cost of Operations $9,096,976 $10,943,865
Source Code 
<h4>Statement of Financial Position (Unaudited) as of March 31, 2011 
(in dollars and percentage)</h4>
<table class="width-90 align-right">
	<caption>Expenses</caption>
	<colgroup>
		<col class="width-30" />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<tr>
		<td></td>
		<th>Dollars (2009)</th>
		<th>Percentage (2009)</th>
		<th>Dollars (2008)</th>
		<th>Percentage (2008)</th>
	</tr>
	<tr>
		<td>Human Resources</td>
		<td>$1,442,421</td>
		<td>14.89%</td>
		<td>$1,524,241</td>
		<td>12.99%</td>
	</tr>
	<tr>
		<td>Communications</td>
		<td>$677,325</td>
		<td>6.99%</td>
		<td>$786,533</td>
		<td>6.70%</td>
	</tr>
	<tr>
		<td>Compensation</td>
		<td>$1,532,523</td>
		<td>15.82%</td>
		<td>$1,678,235</td>
		<td>14.30%</td>
	</tr>
	<tr>
		<td>Information Technology</td>
		<td>$5,361,325</td>
		<td>55.36%</td>
		<td>$6,836,643</td>
		<td>58.27%</td>
	</tr>
	<tr>
		<td>Administration</td>
		<td>$437,634</td>
		<td>4.52%</td>
		<td>$563,235</td>
		<td>4.80%</td>
	</tr>
	<tr>
		<td>Other</td>
		<td>$233,353</td>
		<td>2.41%</td>
		<td>$344,455</td>
		<td>2.94%</td>
	</tr>
	<tr>
		<td><strong>Total</strong></td>
		<td><strong>$9,684,581</strong></td>
		<td><strong>100.00%</strong></td>
		<td><strong>$11,733,342</strong></td>
		<td><strong>100.00%</strong></td>
	</tr>
</table>
<table class="width-90 align-right">
	<caption>Revenues</caption>
	<colgroup>
		<col class="width-30" />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<tr>
		<td></td>
		<th>Dollars (2009)</th>
		<th>Percentage (2009)</th>
		<th>Dollars (2008)</th>
		<th>Percentage (2008)</th>
	</tr>
	<tr>
		<td>Administration</td>
		<td>$553,253</td>
		<td>94.15%</td>
		<td>$735,235</td>
		<td>93.13%</td>
	</tr>
	<tr>
		<td>Other</td>
		<td>$34,352</td>
		<td>5.85%</td>
		<td>$54,242</td>
		<td>6.87%</td>
	</tr>
	<tr>
		<td><strong>Total</strong></td>
		<td><strong>$587,605</strong></td>
		<td><strong>100.00%</strong></td>
		<td><strong>$789,477</strong></td>
		<td><strong>100.00%</strong></td>
	</tr>
</table>
<table class="width-90 align-right">
	<caption>Totals</caption>
	<colgroup>
		<col class="width-30" />
		<col />
		<col />
	</colgroup>
	<tr>
		<td></td>
		<th>2009</th>
		<th>2008</th>
	</tr>
	<tr>
		<th>Net Cost of Operations</th>
		<td><strong>$9,096,976</strong></td>
		<td><strong>$10,943,865</strong></td>
	</tr>
</table>

Web Accessibility Considerations

Cognitive Impairments

  • Keep tables as simple as possible. Unnecessarily complex tables are hard to understand for users who have attention deficit disorder (ADD), dyslexia (difficulty reading), dyscalculia (difficulty with math), and learning disabilities in general.

Mobility, Dexterity and Coordination Impairments

  • Keep tables simple, and where possible, break them out into separate tables. If a table is long and requires vertical scrolling, then the header row may no longer be visible when viewing information further down the table. Therefore, users mobility impairments have to navigate back up to the top header, and then back down again to the content, in order to cross-reference rows with columns.

Visual Impairments

  • Code tables properly to ensure that screen readers can navigate through the header and data cells.