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

Related Techniques

Test

Procedure

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

Expected Result

  • #2 is true.