Structuring the Header Row 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

Structuring the Header Row in a Data Table

Applicability

Use for data tables when presence a row contain more than one cell header (td element).

User Agent Issues

Not Available

Description of Technique

The objective of this technique is to have the row cell header well structured and to avoid confusion between multiple heading in the same row.

The size is calculated with the value of the rowspan attribute. A row header cell next to any row header cell his size is always smaller. Two row header cell with the same size can not co-exist in the same row.

A row cell header can not be defined after any data cell. This exclude key cell and descriptive cell.

The row cell header are contained inside the colgroup header.

Examples

Table 1

Table 1
Row Header Row Header Data Data Data Data Data Data
Row Header Data Data Data Data Data Data
Row Header Data Data Data Data Data Data
Row Header Data Data Data Data Data Data
Row Header Row Header Data Data Data Data Data Data
Row Header Data Data Data Data Data Data
Row Header Data Data Data Data Data Data
Table Source Code

<table class="wet-boew-zebra">
	<caption>Table 1</caption>
	
	<tr>
		<th rowspan="4">Row Header</th>
		<th>Row Header</th>
		<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>Data</td>
		<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>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<th>Row Header</th>
		<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>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th colspan="2">Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

Table 2

Table 2
Row Header Row Header Row Header Data Data Data Data Data
Row Header Data Data Data Data Data
Row Header Row Header Data Data Data Data Data
Row Header Data Data Data Data Data
Table Source Code

<table class="wet-boew-zebra">
	<caption>Table 2</caption>
	
	<tr>
		<th rowspan="4">Row Header</th>
		<th rowspan="2">Row Header</th>
		<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="2">Row Header</th>
		<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>
</table>

Resources

Related Techniques

Test

Procedure

  1. If there is more than row cell header per row. Check if each subsequent row cell header is smaller than the previous one.

Expected Result

  • #1 is true.

Test File 1

This Test File 1 fail this technique. The HTML Table Validator would show a warning. See the Test File 6 for an example that would pass.

Table 3
Row Header Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Table Source Code
<table>
	<caption>Table 3</caption>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

Test File 2

This Test File 2 fail this technique

Table 4
Row Header Row Header Data Data Data Data
Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Data Data Data Data
Table Source Code

<table>
	<caption>Table 4</caption>
	<tr>
		<th>Row Header</th>
		<th rowspan="2">Row Header</th>
		<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>
	</tr>
	<tr>
		<th>Row Header</th>
		<th rowspan="2">Row Header</th>
		<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>
	</tr>
</table>

Test File 3

This Test File 3 fail this technique

Table 5
Row Header Data Data Data Row Header Data
Row Header Data Data Data Row Header Data
Table Source Code
<table>
	<caption>Table 5</caption>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
</table>

Test File 4

This Test File 4 fail this technique

Table 6
Row Header Data Data Data Row Header Data
Data Data Data Row Header Data
Row Header Data Data Data Row Header Data
Data Data Data Row Header Data
Table Source Code
<table>
	<caption>Table 6</caption>
	<tr>
		<th rowspan="2">Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
</table>

Test File 5

This Test File 5 fail this technique

Table 7
Row Header Data Data Data Row Header Data Data Data
Row Header Data Data Data
Row Header Data Data Data Row Header Data Data Data
Row Header Data Data Data
Table Source Code
<table>
	<caption>Table 7</caption>
	<tr>
		<th rowspan="2">Row Header</th>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

Test File 6

This Test File 6 pass this technique. Even if the HTML Table Validator show an warning, this test pass because the heading row structure patern are not the same for all row. So here the paralel heading don't have the same signification as the one illustrated in the Test File 1.

Table 3
Row Header Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Data Data Data Data
Row Header Row Header Data Data Data Data
Row Header Data Data Data Data
Table Source Code
<table>
	<caption>Table 3</caption>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<th>Row Header</th>
		<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>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<th>Row Header</th>
		<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>
	</tr>
</table>