Defining a Layout Cell in a Data Table
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 Layout Cell in a Data Table
Applicability
Use for data tables when the table contain header row group with a column header group and row group summary with column group summary.
User Agent Issues
Not Available
Description of Technique
The objective of this technique is to define a layout cell inside a data table.
A layout cell is an empty td or th element defined at the intersection of a header group or/and summary group. The layout cell have the size of the group intersection. The table need to have the option "hassum" to be able to contains summary group.
Examples
Table 1
| Col Header | Col Header | Col Header | Col Header | Col Header | Col 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 complextableparsing">
<caption>Table 1</caption>
<thead>
<tr>
<th></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>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 2
Table with the option "hassum"
| Col Header | Col Header | Col Header | Col Header | Col Header | Total | |
|---|---|---|---|---|---|---|
| Row Header | Data | Data | Data | Data | Data | Data |
| Row Header | Data | Data | Data | Data | Data | Data |
| Total | Data | Data | Data | Data | Data |
Table Source Code
<table class="wet-boew-zebra hassum">
<caption>Table 2</caption>
<colgroup>
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<colgroup>
<col />
</colgroup>
<thead>
<tr>
<th></th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Col Header</th>
<th>Total</th>
</tr>
</thead>
<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>
</tbody>
<tbody>
<tr>
<th>Total</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td></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 the cell at the header and summary group intersection, if they contain no heading information of no summary information ensure they are empty element.
Expected Result
- #1 is true
- Date modified: