Describing a Column Header Cell in a Data Table - Web Experience Toolkit (WET)
Technique Author
Name: Pierre Dubois
Email: Pierre Dubois at ic dot gc dot ca
Technique Information
Technology
HTML and XHTML Techniques
Guidelines Reference
Success Criterion 1.3.1 (Info and Relationships)
Technique Title
Describing a Column Header Cell in a Data Table
Applicability
Use for data tables when a column cell header have a description.
User Agent Issues
Not Available
Description of Technique
The objective of this technique is to define the relationship between a column header cell and his data used to provide a description
The column descriptive cell is defined in the header row group (thead). The description has the same size (colspan) and positionned in the same column but in the next row.
When a table have a column descriptive cell, the full row is used for the column description cell.
A column header cell have only one descriptive cell.
Examples
Table 1
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|---|---|
| Description | Description | Description | Description | Description | Description |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
Table Source Code
<table class="wet-boew-zebra">
<caption>Table 1</caption>
<thead>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
<tr>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>Table 2
| Col Header | Col Header | Col Header | |||
|---|---|---|---|---|---|
| Description | Description | Description | |||
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
| Description | Description | Description | Description | Description | Description |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
Table Source Code
<table class="wet-boew-zebra">
<caption>Table 2</caption>
<thead>
<tr>
<th colspan="2">Col Header</th>
<th colspan="2">Col Header</th>
<th colspan="2">Col Header</th>
</tr>
<tr>
<td colspan="2">Description</td>
<td colspan="2">Description</td>
<td colspan="2">Description</td>
</tr>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
<tr>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>Resources
- HTML Table Validator (With ids/headers/aria-describedby auto assignation)
- About the Table Usability Concept
- Extended definition of HTML5 table elements
- All the resources
Related Techniques
- H51: Using table markup to present tabular information
- H39: Using caption elements to associate data table captions with data tables
- H73: Using the summary attribute of the table element to give an overview of 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
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
- F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
- G57: Ordering the content in a meaningful sequence
Test
Procedure
- If the table contain descriptive cell for a column header cell, ensure they are in a td element, have the same size and position in the next row.
Expected Result
- #1 is true.
Test File 1
This Test File 1 fail this technique
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|---|---|
| Description | Description | Description | Description | Description | Description |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
The descriptive is defined in the tbody row group, they need to be defined inside the thead row group.
Table Source Code
<table>
<caption>Table 3</caption>
<thead>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
<td>Description</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>Test File 2
This Test File 2 fail this technique
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|---|---|
| Description | Description | Description | |||
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 4</caption>
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
<tr>
<td colspan="2">Description</td>
<td colspan="2">Description</td>
<td colspan="2">Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>- Date modified: