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
| 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
| 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
| 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
- 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
- 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
| 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
| 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>- Date modified: