Describing a Row Header Cell 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
Describing a Row Header Cell in a Data Table
Applicability
Use when a row cell header is followed by a description in his next data cell.
User Agent Issues
Not Available
Description of Technique
The objective of this technique is to associate a data cell used as a description to a row cell header.
When the description cell (td element) need to be the same size (colspan, rowspan) as the cell header his describe. A descriptive cell is next to the cell header.
Only one descriptive cell can be associated per row cell header. When the descriptive cell is between two row cell header, is know as a descriptive cell. But when the descriptive cell is followed by the tabular data, the first colgroup length would defined this as a descriptive cell.
Note: First Column Group Definition
The first colgroup, when a presence of row cell header, is know as the column group header. That is similar to the concept of the "thead" row group but for column group.
Examples
Table 1
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|---|---|---|---|
| Row Header | Description | Data | Data | Data | Data | Data | Data |
| Row Header | Description | Data | Data | Data | Data | Data | Data |
| Row Header | Description | Data | Data | Data | Data | Data | Data |
| Row Header | Description | Data | Data | Data | Data | Data | Data |
| Row Header | Description | Data | Data | Data | Data | Data | Data |
| Row Header | Description | Data | Data | Data | Data | Data | Data |
The second column is know as a descriptive cell based on the colgroup definition.
Table Source Code
<table class="wet-boew-zebra">
<caption>Table 1</caption>
<colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
<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>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row Header</th>
<td>Description</td>
<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>Description</td>
<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>Description</td>
<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>Description</td>
<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>Description</td>
<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>Description</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>Table 2
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|---|---|---|---|
| Row Header | Description | Row Header | Data | Data | Data | Data | Data |
| Row Header | Data | Data | Data | Data | Data | ||
| Row Header | Description | Row Header | Data | Data | Data | Data | Data |
| Row Header | Data | Data | Data | Data | Data | ||
| Row Header | Data | Data | Data | Data | Data | ||
| Row Header | Data | Data | Data | Data | Data | ||
The second column is know as a descriptive cell because is between two row cell header.
Table Source Code
<table class="wet-boew-zebra">
<caption>Table 2</caption>
<colgroup>
<col />
<col />
<col />
</colgroup>
<colgroup>
<col />
<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>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">Row Header</th>
<td rowspan="2">Description</td>
<th>Row Header</th>
<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>
</tr>
<tr>
<th rowspan="3">Row Header</th>
<td rowspan="3">Description</td>
<th>Row Header</th>
<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>
</tr>
<tr>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th colspan="3">Row Header</th>
<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 table contain descriptive cell
- The descriptive cell is between two row cell or the description column is included in the first colgroup.
Expected Result
- #2 is true.
Table Source Code
Additional Notes
None
- Date modified: