- Skip to main content
- Skip to footer

# Tables - Optimal Content Examples

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

Table Of Contents

- Introduction
- Coding Requirements
- Content Examples
- Web Accessibility Considerations
- Related Links

## 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:

- 1.3.1 Info and Relationships

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:

- 1.3.1 Info and Relationships

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.

## Related Links

- Table Simplification - Optimal Content Examples

- Web Content Accessibility Guidelines (WCAG) 2.0 Success Criterions

  - 1.3.1 Info and Relationships
  - 1.4.1 Use Of Color

- Web Content Accessibility Guidelines (WCAG) 2.0 Sufficient Techniques

  - H51: Using table markup to present tabular information
  - H39: Using caption elements to associate data table captions with data tables
  - H63: Using the scope attribute to associate header cells and data cells in data tables
  - H43: Using id and headers attributes to associate data cells with header cells in data tables

Date modified:
  2013-04-11