Defining Column Group Header in a Data Table
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 Column Group Header in a Data Table
Applicability
Use for data tables when the table contain a row header cell.
User Agent Issues
Not Available
Description of Technique
The objective of this technique is to defined a relationship between the colgroup that contain the column used for the row cell header with his key and description cell.
When the table have at least one row cell header, the first colgroup is named a header colgroup.
Examples
Table 1
Key | Row Header | Description | Data | Data | Data |
---|---|---|---|---|---|
Key | Row Header | Description | Data | Data | Data |
Key | Row Header | Description | Data | Data | Data |
Key | Row Header | Description | Data | Data | Data |
Table Source Code
<table class="wet-boew-zebra">
<caption>Table 1</caption>
<colgroup>
<col />
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<td>Key</td>
<th>Row Header</th>
<td>Description</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Key</td>
<th>Row Header</th>
<td>Description</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Key</td>
<th>Row Header</th>
<td>Description</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Key</td>
<th>Row Header</th>
<td>Description</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 have a row group cell header, check if the first colgroup represent the cell consisting as the heading defintion for a row.
Expected Result
- #1 is true
- Date modified: