Structuring the Header Row in a Data Table - Web Experience Toolkit (WET)
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
Structuring the Header Row in a Data Table
Applicability
Use for data tables when presence a row contain more than one cell header (td element).
User Agent Issues
Not Available
Description of Technique
The objective of this technique is to have the row cell header well structured and to avoid confusion between multiple heading in the same row.
The size is calculated with the value of the rowspan attribute. A row header cell next to any row header cell his size is always smaller. Two row header cell with the same size can not co-exist in the same row.
A row cell header can not be defined after any data cell. This exclude key cell and descriptive cell.
The row cell header are contained inside the colgroup header.
Examples
Table 1
| Row Header | Row Header | Data | Data | Data | Data | Data | Data |
|---|---|---|---|---|---|---|---|
| Row Header | Data | Data | Data | Data | Data | Data | |
| Row Header | Data | Data | Data | Data | Data | Data | |
| Row Header | Data | Data | Data | Data | Data | Data | |
| Row Header | 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 1</caption>
<tr>
<th rowspan="4">Row Header</th>
<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>
<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 rowspan="2">Row Header</th>
<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 colspan="2">Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>Table 2
| Row Header | Row Header | Row Header | Data | Data | Data | Data | Data |
|---|---|---|---|---|---|---|---|
| Row Header | Data | Data | Data | Data | Data | ||
| Row Header | Row Header | Data | Data | Data | Data | Data | |
| Row Header | Data | Data | Data | Data | Data |
Table Source Code
<table class="wet-boew-zebra">
<caption>Table 2</caption>
<tr>
<th rowspan="4">Row Header</th>
<th rowspan="2">Row Header</th>
<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="2">Row Header</th>
<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>
</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 there is more than row cell header per row. Check if each subsequent row cell header is smaller than the previous one.
Expected Result
- #1 is true.
Test File 1
This Test File 1 fail this technique. The HTML Table Validator would show a warning. See the Test File 6 for an example that would pass.
| Row Header | Row Header | Data | Data | Data | Data |
|---|---|---|---|---|---|
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Row Header | Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 3</caption>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>Test File 2
This Test File 2 fail this technique
| Row Header | Row Header | Data | Data | Data | Data |
|---|---|---|---|---|---|
| Row Header | Data | Data | Data | Data | |
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 4</caption>
<tr>
<th>Row Header</th>
<th rowspan="2">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>
<th rowspan="2">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>
</table>Test File 3
This Test File 3 fail this technique
| Row Header | Data | Data | Data | Row Header | Data |
|---|---|---|---|---|---|
| Row Header | Data | Data | Data | Row Header | Data |
Table Source Code
<table>
<caption>Table 5</caption>
<tr>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<th>Row Header</th>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<th>Row Header</th>
<td>Data</td>
</tr>
</table>Test File 4
This Test File 4 fail this technique
| Row Header | Data | Data | Data | Row Header | Data |
|---|---|---|---|---|---|
| Data | Data | Data | Row Header | Data | |
| Row Header | Data | Data | Data | Row Header | Data |
| Data | Data | Data | Row Header | Data |
Table Source Code
<table>
<caption>Table 6</caption>
<tr>
<th rowspan="2">Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<th>Row Header</th>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<th>Row Header</th>
<td>Data</td>
</tr>
<tr>
<th rowspan="2">Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<th>Row Header</th>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<th>Row Header</th>
<td>Data</td>
</tr>
</table>
Test File 5
This Test File 5 fail this technique
| Row Header | Data | Data | Data | Row Header | Data | Data | Data |
|---|---|---|---|---|---|---|---|
| Row Header | Data | Data | Data | ||||
| Row Header | Data | Data | Data | Row Header | Data | Data | Data |
| Row Header | Data | Data | Data |
Table Source Code
<table>
<caption>Table 7</caption>
<tr>
<th rowspan="2">Row Header</th>
<td rowspan="2">Data</td>
<td rowspan="2">Data</td>
<td rowspan="2">Data</td>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th rowspan="2">Row Header</th>
<td rowspan="2">Data</td>
<td rowspan="2">Data</td>
<td rowspan="2">Data</td>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Test File 6
This Test File 6 pass this technique. Even if the HTML Table Validator show an warning, this test pass because the heading row structure patern are not the same for all row. So here the paralel heading don't have the same signification as the one illustrated in the Test File 1.
| Row Header | Row Header | Data | Data | Data | Data |
|---|---|---|---|---|---|
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Data | Data | Data | Data | |
| Row Header | Row Header | Data | Data | Data | Data |
| Row Header | Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 3</caption>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Row Header</th>
<th>Row Header</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th rowspan="2">Row Header</th>
<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 rowspan="2">Row Header</th>
<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>
</table>- Date modified: