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

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

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

Related Techniques

Test

Procedure

  1. 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

Table 3
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

Table 4
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>