HTML Table Validator - Table Usability

Instruction

The table structure analysis is based on the WCAG 2.0 Level AA, HTML5 specification, the 12 techniques listed below under "Resources" and with the concept of having summary group (activated with the option "hassum").

This validator would help you find any relationship error defined in your complex table. The validation process can be accomplished by pasting your HTML table source code without the table element in the text field below and clicking the button "Analyse".

Once the validator has detected that your complex and simple table is well structured, under the Result heading you will get access to a version with the best accessibility method that can be used on your complex and simple table markup. By default, all the ids, headers, scope and class are removed. If you want to keep your table ids, please check the option "Do not clean the HTML Tabular Markup". Please note that you would have different HTML markup result of the same complex table depending of the browser used, but both are valid as per the HTML5 specification. For example, with Firefox and chrome the HTML tag are in lowercase and in Internet Explorer you get HTML tag in uppercase.

Analysing your Complex HTML Table

Options



Accessibility
Please add content bellow

Will be analysed with Has Summary Group ("hassum") option

<table> (Will overwrite any table element pasted bellow)

</table>

Message

  • Use the above text field to analyse your HTML Complex Table Source Code

Result

Nothing to being displayed

Resources

View all resource

Simple Table

  • Zero or one row used to define column headers. That row is located at the top of the table.
  • Zero or one column used to define row headers. That is the first cell for each row, excluding the first table row if it used for columns headers.
  • If there is no table footers (tfoot) row group, the row grouping element thead, tbody can be omited.
Simple Example 

<table>
	<caption>Table 1 - Simple Table Example</caption>
	<tr>
		<th></th>
		<th>Col Heading</th>
		<th>Col Heading</th>
		<th>Col Heading</th>
		<th>Col Heading</th>
		<th>Col Heading</th>
		<th>Col Heading</th>
		<th>Col Heading</th>
	</tr>
	<tr>
		<th>Row Heading</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Heading</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Heading</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Heading</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>
Simple Example with a tfoot 

<table>
	<caption>Table 2 - Simple Table Example with a <code>tfoot</code></caption>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tfoot>
</table>

Simple Row Grouping

  • Zero or one row used to define column headers. That row is located at the top of the table.
  • Zero or one column used to define row headers. That is the first cell for each row, excluding the first table row if it used for columns headers.
  • The row grouping element is required thead, tbody, tfoot because the scope "rowgroup" needs to be anchored in a tbody element.
  • Zero summary row group created with a tbody element
Example Simple Row Grouping 


<!-- The "scope" attribute was omited for clarity. If you would like to see the following table with the scope attribute set, you just need to use the above HTML Table Validator -->

<table>
	<caption>Table 3 - Simple Row Grouping Table Example</caption>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>

	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Simple Column Grouping

  • Two row for the column cell header
  • Column cell header in the first row need to match the data colgroup element by his location and width.
  • Column cell header in the first row, for the data column group, are larger than one column.
  • With an header column group the top left cell is a layout cell.
  • Zero summary column group.
Example Simple Column Grouping 

<!-- The "scope" attribute was omited for clarity. If you would like to see the following table with the scope attribute set, you just need to use the above HTML Table Validator -->

<table>
	<caption>Table 4 - Simple Column Grouping Table Example</caption>
	<colgroup>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
	</colgroup>
	<colgroup>
		<col>
		<col>
	</colgroup>
	<thead>
		<tr>
			<th rowspan="2"></th> <!-- Layout Cell -->
			<th colspan="2">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>
		</tr>
	</thead>
	<tbody>
		<tr>
			<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>Row Header</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Complex Table

Everything that are not defined as Simple Table and Simple Grouping Table.

HTML Table Technique

Issued from the WET Toolbox 3.0

  1. Defining a Key Cell
  2. Defining a Data Row Group
  3. Summaries a Data Row Group
  4. Structuring the Header Row
  5. Describing a Row Header Cell
  6. Describing a Row Group Header Cell
  7. Defining Column Group Header
  8. Structuring the Header Column Cell
  9. Defining a Data Column Group
  10. Summaries a Data Column Group
  11. Describing a Column Header Cell
  12. Defining a Layout Cell

From the WCAG 2.0

Footnotes

Footnote 1

Since WET 3.0.2, the default behaviour regarding the subsequent group has been changed because of backward compatibility issue. This affect the complex data level relationships between group but do not change the accessibility method used prior this update. In the WET Toolbox, you can set the "hassum" option by adding the class hassum to the table element.

Return to footnote 1 referrer

Footnote 2

Forcing the HTML Results to be show may cause undesired javascript errors. But forcing the HTML Results can sometimes helps to figure out the errors detected in the tabular markup.

Return to footnote 2 referrer

Footnote 3

Clean HTML Tabular Markup means to remove any scope, class, id, headers, aria-describedby attribute that was originally defined in the pasted HTML table code.

Return to footnote 3 referrer