Structuring the Header Column Cell 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 Column Cell in a Data Table
Applicability
Use for data tables when the column consist in two or more row.
User Agent Issues
Not Available
Description of Technique
The objective of this technique is to have the column cell header logically strutured when there is column cell header consist of two or more row.
The column cell heading is calculated based on his colspan attribute. The row of column are larger than the column below them.
The column cell heading is contained in the row group "thead"
The first row of column need to have at least two column. If there is only one column this should be merged with the table caption.
Two subsequent colum of the same size can not coexist.
Examples
Table 1
| Col Header | Col Header | Col Header | ||||
|---|---|---|---|---|---|---|
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | |
| Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data |
Table Source Code
<table class="wet-boew-zebra columnhighlight">
<caption>Table 1</caption>
<!-- The colgroup and col is used here for the column highlight -->
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th colspan="4">Col Header</th>
<th colspan="2">Col Header</th>
<th rowspan="2">Col Header</th>
</tr>
<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>
</tr>
</thead>
<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>
</tbody>
</table>Table 2
| Col Header | Col Header | |||||
|---|---|---|---|---|---|---|
| Col Header | Col Header | |||||
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | |
| Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data |
Table Source Code
<table class="wet-boew-zebra columnhighlight">
<caption>Table 2</caption>
<!-- The colgroup and col is used here for the column highlight -->
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th colspan="6">Col Header</th>
<th rowspan="3">Col Header</th>
</tr>
<tr>
<th colspan="4">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>
<th>Col Header</th>
<th>Col Header</th>
</tr>
</thead>
<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>
</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 there is more than row of column cell header. Check if each subsequent column cell header is larger than the previous one located above.
Expected Result
- #1 is true
Test File 1
This Test File 1 fail this technique
| Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|
| Col Header | Col Header | Col Header | Col Header |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 3</caption>
<thead>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>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>
<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>
</tr>
</tbody>
</table>
Test File 2
This Test File 2 fail this technique
| Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|
| Col Header | Col Header | ||
| Data | Data | Data | Data |
| Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 4</caption>
<thead>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
<tr>
<th colspan="2">Col Header</th>
<th colspan="2">Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<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>
</tr>
</tbody>
</table>Test File 3
This Test File 3 fail this technique
| Col Header | Col Header | Col Header | Col Header |
|---|---|---|---|
| Data | Data | Data | Data |
| Data | Data | Data | Data |
| Col Header | Col Header | Col Header | Col Header |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 5</caption>
<thead>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<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>
</tr>
<tr>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
</tr>
<tr>
<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>
</tr>
</tbody>
</table>
Test File 4
This Test File 4 fail this technique
| Col Header | Col Header | Col Header | ||||
|---|---|---|---|---|---|---|
| Data | Data | Data | ||||
| Data | Data | Data | ||||
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
| Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 6</caption>
<thead>
<tr>
<th colspan="4">Col Header</th>
<th colspan="2">Col Header</th>
<th>Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Data</td>
<td colspan="2">Data</td>
<td>Data</td>
</tr>
<tr>
<td colspan="4">Data</td>
<td colspan="2">Data</td>
<td>Data</td>
</tr>
<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>
</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>
Test File 5
This Test File 5 fail this technique
| Col Header | ||||||
|---|---|---|---|---|---|---|
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
| Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 7</caption>
<thead>
<tr>
<th colspan="7">Col Header</th>
</tr>
<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>
</tr>
</thead>
<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>
</tbody>
</table>
Test File 6
This Test File 6 pass this technique
| Col Header | Col Header | Col Header | |||
|---|---|---|---|---|---|
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
Table Source Code
<table>
<caption>Table 8</caption>
<!-- The colgroup and col is used here for the column highlight -->
<colgroup>
<col span="2" />
<col span="2" />
<col span="2" />
</colgroup>
<thead>
<tr>
<th colspan="2">Col Header</th>
<th colspan="2">Col Header</th>
<th colspan="2">Col Header</th>
</tr>
</thead>
<tbody>
<tr>
<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>
</tr>
</tbody>
</table>
Test File 7
This Test File 7 fail this technique
| Col Header | Col Header | |||||
|---|---|---|---|---|---|---|
| Col Header | Col Header | Col Header | Col Header | Col Header | Col Header | Col Header |
| Data | Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data | Data |
It's failling because the second row of column is defined in a tbody section.
Table Source Code
<table>
<caption>Table 9</caption>
<thead>
<tr>
<th colspan="4">Col Header</th>
<th colspan="2">Col Header</th>
<th rowspan="2">Col Header</th>
</tr>
</thead>
<tbody>
<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>
</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>
- Date modified: