Defining a Data Column Group in a Data Table - Web Experience Toolkit (WET)

Attention: Since WET 3.0.2

The default behaviour regarding the subsequent group has been changed because of backward compatibility issue and because of some use case. See the Test File 1 and the Test File 2 for examples.

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

Defining a Data Column Group in a Data Table

Applicability

Use for data tables when the table contain a data column.

User Agent Issues

Not Available

Description of Technique

The objective of this technique is to define a relationship between the colgroup element and the data cell in the table.

If the table contain an header column group, the second next colgroup is considerated as a data column group.

If the table don't have an header column group, the first colgroup is considerated as a data column group.

When the table don't have column header cell, Each colgroup is a data column group except for the first one if there a presence of a row header cell. When the table is on the "hassum" mode, this allow to have summary column group when the table have columns header cell.

Examples

Table 1

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

Table 2

Table 2
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 2</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
	</colgroup>
	<tbody>
		<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>
	</tbody>
</table>

Table 3

Table 3
Data Data Data 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 3</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
	</colgroup>
	<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>
		<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 the table contain a data, check if there are defined also with the a colgroup element.

Expected Result

  • #1 is true

Test File 1

This Test File 1 pass this technique

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

Test File 2

This Test File 2 pass this technique

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