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
| 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
| 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
| 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
| 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
- HTML Table Validator (With ids/headers/aria-describedby auto assignation)
- About the Table Usability Concept
- Extended definition of HTML5 table elements
- All the resources
Related Techniques
- H51: Using table markup to present tabular information
- H39: Using caption elements to associate data table captions with data tables
- H73: Using the summary attribute of the table element to give an overview of data tables
- H63: Using the scope attribute to associate header cells and data cells in data tables
- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
- F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
- G57: Ordering the content in a meaningful sequence
Test
Procedure
- Check if the data table have a row group header cell.
- Check if the data table have more than one data row group.
- 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
| 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>
- Date modified: