Defining a Data Row 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 2 for an example.

Note: Table Source Code Example

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

The format used for this technique is similar to the WCAG 2.0 Techniques

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 Row Group in a Data Table

Applicability

Use for data tables where it include more than one data group.

User Agent Issues

Not Available

Description of Technique

The objective of this technique is to define a row group header that would identify a data group. This technique simulate sub-caption in the data table. Each data group is delimited by a tbody element.

This technique introduce a "Data Level" concept. This represent the relationship between each data group versus an heading. With this technique, the "caption" table element is considerated as a cell header.

The default data level is 1. The data level increase depending of the number of the consecutive row group header cell found. By Default if a subsequent data row group do not have a row group header cell, it is considerated as the same data level of the preceding row group. When the table is on the "hassum" mode, the A data level can be decreased when two or more consecutive summary group is found.

The data level stay constant between 2 consecutive data group. Like if the first data group, with two row group header cell, is considerated at the level 3. If the second data group only have one row group header cell, that group is also considerated at the level 3 and have a relationship with the first row group header cell defined in the first data group.

Examples

Table 1 - Two data row group

Table 1 - Two Data Row Group
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group B
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
  • Group A at level 2.
  • Group B at level 2.
Table Source Code

<table class="wet-boew-zebra">
	<caption>Table 1 - Two Data Row Group</caption>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<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 - Two data row group different level

Table 2 - Two Data Row Group
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
  • First 4 row at level 1.
  • Group A at level 2.
Table Source Code


<table class="wet-boew-zebra">
	<caption>Table 2 - Two Data Row Group</caption>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<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 3 - Two data row group

Table 3 - Two Data Row Group
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A
Group B
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group C
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
  • Group B at level 3.
  • Group C at level 3 with a relationshipt with the group A.
Table Source Code


<table class="wet-boew-zebra">
	<caption>Table 3 - Two Data Row Group</caption>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group C</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<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 4 - Two data row group

Table 4 - Two Data Row Group
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group B
Group C
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group D
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
  • Group A at level 2.
  • Group B at level 3 with a relationshipt with the group B.
  • Group D at level 3 with a relationshipt with the group B.
Table Source Code


<table class="wet-boew-zebra">
	<caption>Table 4 - Two Data Row Group</caption>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<th colspan="8">Group C</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group D</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<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. Check if the data table have a row group header cell.
  2. Check if the data table have more than one data row group.
  3. Validate the relationship between the data group with the data meaning.

Expected Result

  • #1, #2 and #3 are true.

Test File 1

This Test File 1 Pass this technique

Table 5 - Two Data Row Group without any column
Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group B
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
  • Group A at level 2.
  • Group B at level 2.
Table Source Code

<table class="wet-boew-zebra">
	<caption>Table 5 - Two Data Row Group without any column</caption>

	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<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 2

This Test File 2 Pass this technique

Group A Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group B Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group C
Group D Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group E Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
  • Group A at level 1.
  • Group B at level 1.
  • Group C at level 2.
  • Group E at level 2.
Table Source Code


<table class="wet-boew-zebra">
	<colgroup>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
		<col>
		<col>
		<col>
		<col>
		<col>
	</colgroup>
	<tbody>
		<tr>
			<th rowspan="4">Group A</th>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th rowspan="4">Group B</th>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="9">Group C</th>
		</tr>
		<tr>
			<th rowspan="4">Group D</th>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th rowspan="4">Group E</th>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>