Defining a Layout Cell in a Data Table - Web Experience Toolkit (WET)

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

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"

Table 2
	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

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