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

Structuring the Header Column Cell in a Data Table

Applicability

Use for data tables when the column consist in two or more row.

User Agent Issues

Not Available

Description of Technique

The objective of this technique is to have the column cell header logically strutured when there is column cell header consist of two or more row.

The column cell heading is calculated based on his colspan attribute. The row of column are larger than the column below them.

The column cell heading is contained in the row group "thead"

The first row of column need to have at least two column. If there is only one column this should be merged with the table caption.

Two subsequent colum of the same size can not coexist.

Examples

Table 1

Table 1
Col Header Col Header Col Header
Col Header Col Header Col Header Col Header Col Header Col Header
Data Data Data Data Data Data Data
Data Data Data Data Data Data Data
Table Source Code

<table class="wet-boew-zebra columnhighlight">
	<caption>Table 1</caption>
	<!-- The colgroup and col is used here for the column highlight -->
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th colspan="4">Col Header</th>
			<th colspan="2">Col Header</th>
			<th rowspan="2">Col Header</th>
		</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>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<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>
			<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 Col Header Col Header
Data Data Data Data Data Data Data
Data Data Data Data Data Data Data
Table Source Code
<table class="wet-boew-zebra columnhighlight">
	<caption>Table 2</caption>
	<!-- The colgroup and col is used here for the column highlight -->
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th colspan="6">Col Header</th>
			<th rowspan="3">Col Header</th>
		</tr>
		<tr>
			<th colspan="4">Col Header</th>
			<th colspan="2">Col Header</th>
		</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>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<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>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Resources

Related Techniques

Test

Procedure

  1. If there is more than row of column cell header. Check if each subsequent column cell header is larger than the previous one located above.

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 Col Header Col Header
Data Data Data Data
Data Data Data Data
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>
		</tr>
		<tr>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<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>
		</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
Data Data Data Data
Data Data Data Data
Table Source Code
<table>
	<caption>Table 4</caption>
	<thead>
		<tr>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
		</tr>
		<tr>
			<th colspan="2">Col Header</th>
			<th colspan="2">Col Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<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>
		</tr>
	</tbody>
</table>

Test File 3

This Test File 3 fail this technique

Table 5
Col Header Col Header Col Header Col Header
Data Data Data Data
Data Data Data Data
Col Header Col Header Col Header Col Header
Data Data Data Data
Data Data Data Data
Table Source Code
<table>
	<caption>Table 5</caption>
	<thead>
		<tr>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<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>
		</tr>
		<tr>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
			<th>Col Header</th>
		</tr>
		<tr>
			<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>
		</tr>
	</tbody>
</table>

Test File 4

This Test File 4 fail this technique

Table 6
Col Header Col Header Col Header
Data Data Data
Data Data Data
Col Header Col Header Col Header Col Header Col Header Col Header Col Header
Data Data Data Data Data Data Data
Data Data Data Data Data Data Data
Table Source Code
<table>
	<caption>Table 6</caption>
	<thead>
		<tr>
			<th colspan="4">Col Header</th>
			<th colspan="2">Col Header</th>
			<th>Col Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="4">Data</td>
			<td colspan="2">Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td colspan="4">Data</td>
			<td colspan="2">Data</td>
			<td>Data</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>
			<th>Col Header</th>
		</tr>
		<tr>
			<td>Data</td>
			<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>
			<td>Data</td>
		</tr>

	</tbody>
</table>

Test File 5

This Test File 5 fail this technique

Table 7
Col Header
Col Header Col Header Col Header Col Header Col Header Col Header Col Header
Data Data Data Data Data Data Data
Data Data Data Data Data Data Data
Table Source Code
<table>
	<caption>Table 7</caption>
	<thead>
		<tr>
			<th colspan="7">Col Header</th>
		</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>
			<th>Col Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data</td>
			<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>
			<td>Data</td>
		</tr>

	</tbody>
</table>

Test File 6

This Test File 6 pass this technique

Table 8
Col Header Col Header Col Header
Data Data Data Data Data Data
Data Data Data Data Data Data
Table Source Code
<table>
	<caption>Table 8</caption>
	<!-- The colgroup and col is used here for the column highlight -->
	<colgroup>
		<col span="2" />
		<col span="2" />
		<col span="2" />
	</colgroup>
	<thead>
		<tr>
			<th colspan="2">Col Header</th>
			<th colspan="2">Col Header</th>
			<th colspan="2">Col Header</th>
		</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>

	</tbody>
</table>

Test File 7

This Test File 7 fail this technique

Table 9
Col Header Col Header
Col Header Col Header Col Header Col Header Col Header Col Header Col Header
Data Data Data Data Data Data Data
Data Data Data Data Data Data Data

It's failling because the second row of column is defined in a tbody section.

Table Source Code
<table>
	<caption>Table 9</caption>
	<thead>
		<tr>
			<th colspan="4">Col Header</th>
			<th colspan="2">Col Header</th>
			<th rowspan="2">Col Header</th>
		</tr>
	</thead>
	<tbody>
		<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>Data</td>
			<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>
			<td>Data</td>
		</tr>
	</tbody>
</table>