Describing a Row Header Cell in a Data Table - Web Experience Toolkit (WET)

Note: Table Source Code Example

Id/Headers attribute, colgroup element and col element was omited intentionally for clarity.

Technique Author

Name: Pierre Dubois

Technique Information

Technology

HTML and XHTML Techniques

Guidelines Reference

Success Criterion 1.3.1 (Info and Relationships)

Technique Title

Describing a Row Header Cell in a Data Table

Applicability

Use when a row cell header is followed by a description in his next data cell.

User Agent Issues

Not Available

Description of Technique

The objective of this technique is to associate a data cell used as a description to a row cell header.

When the description cell (td element) need to be the same size (colspan, rowspan) as the cell header his describe. A descriptive cell is next to the cell header.

Only one descriptive cell can be associated per row cell header. When the descriptive cell is between two row cell header, is know as a descriptive cell. But when the descriptive cell is followed by the tabular data, the first colgroup length would defined this as a descriptive cell.

Note: First Column Group Definition

The first colgroup, when a presence of row cell header, is know as the column group header. That is similar to the concept of the "thead" row group but for column group.

Examples

Table 1

Table 1
Col Header	Col Header	Col Header	Col Header	Col Header	Col Header	Col Header	Col Header
Row Header	Description	Data	Data	Data	Data	Data	Data
Row Header	Description	Data	Data	Data	Data	Data	Data
Row Header	Description	Data	Data	Data	Data	Data	Data
Row Header	Description	Data	Data	Data	Data	Data	Data
Row Header	Description	Data	Data	Data	Data	Data	Data
Row Header	Description	Data	Data	Data	Data	Data	Data

The second column is know as a descriptive cell based on the colgroup definition.

Table Source Code

<table class="wet-boew-zebra">
	<caption>Table 1</caption>
	<colgroup>
		<col />
		<col />
	</colgroup>
	<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>
			<th>Col Header</th>
			<th>Col Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row Header</th>
			<td>Description</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Description</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Description</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Description</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Description</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Description</td>
			<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	Col Header	Col Header	Col Header	Col Header	Col Header
Row Header	Description	Row Header	Data	Data	Data	Data	Data
Row Header	Description	Row Header	Data	Data	Data	Data	Data
Row Header	Description	Row Header	Data	Data	Data	Data	Data
		Row Header	Data	Data	Data	Data	Data
		Row Header	Data	Data	Data	Data	Data
Row Header			Data	Data	Data	Data	Data

The second column is know as a descriptive cell because is between two row cell header.

Table Source Code

<table class="wet-boew-zebra">
	<caption>Table 2</caption>
	<colgroup>
		<col />
		<col />
		<col />
	</colgroup>
	<colgroup>
		<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>
			<th>Col Header</th>
			<th>Col Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th rowspan="2">Row Header</th>
			<td rowspan="2">Description</td>
			<th>Row Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th rowspan="3">Row Header</th>
			<td rowspan="3">Description</td>
			<th>Row Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th colspan="3">Row Header</th>
			<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

Test

Procedure

Check if the table contain descriptive cell
The descriptive cell is between two row cell or the description column is included in the first colgroup.

Expected Result

#2 is true.