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

Related Techniques

Test

Procedure

  1. 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