demos/tableparser/headerrowgroupstructure-techniques.html

﻿<!DOCTYPE html>
<!--[if IE 7]><html lang="en" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
wet-boew.github.com/wet-boew/License-eng.txt / wet-boew.github.com/wet-boew/Licence-fra.txt -->
<title>Structuring the Header Row in a Data Table - Techniques about HTML Tables - Web Experience Toolkit (WET)</title>

<link rel="shortcut icon" href="../../dist/theme-gcwu-fegc/images/favicon.ico" />
<meta name="description" content="English description / Description en anglais" />
<meta name="dcterms.creator" content="English name of the content author / Nom en anglais de l'auteur du contenu" />
<meta name="dcterms.title" content="English title / Titre en anglais" />
<meta name="dcterms.issued" title="W3CDTF" content="Date published (YYYY-MM-DD) / Date de publication (AAAA-MM-JJ)" />
<meta name="dcterms.modified" title="W3CDTF" content="Date modified (YYYY-MM-DD) / Date de modification (AAAA-MM-JJ)" />
<meta name="dcterms.subject" title="scheme" content="English subject terms / Termes de sujet en anglais" />
<meta name="dcterms.language" title="ISO639-2" content="eng" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="../../dist/js/jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="../../dist/js/polyfills/html5shiv-min.js"></script>
<link rel="stylesheet" href="../../dist/grids/css/util-ie-min.css" />
<link rel="stylesheet" href="../../dist/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ie-min.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../../dist/grids/css/util-min.css" />
<link rel="stylesheet" href="../../dist/js/css/pe-ap-min.css" />
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-min.css" />
<!--<![endif]-->
<noscript><link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ns-min.css" /></noscript>

<!-- CustomScriptsCSSStart -->
<!-- CustomScriptsCSSEnd -->
</head>

<body><div id="wb-body">
<div id="wb-skip">
<ul id="wb-tphp">
<li id="wb-skip1"><a href="#wb-cont">Skip to main content</a></li>
<li id="wb-skip2"><a href="#wb-nav">Skip to footer</a></li>
</ul>
</div>

<div id="wb-head"><div id="wb-head-in"><header>
<!-- HeaderStart -->
<nav role="navigation"><div id="gcwu-gcnb"><h2>Government of Canada navigation bar</h2><div id="gcwu-gcnb-in"><div id="gcwu-gcnb-fip">
<div id="gcwu-sig"><div id="gcwu-sig-in"><div id="gcwu-sig-eng" title="Government of Canada"><img src="../../dist/theme-gcwu-fegc/images/sig-eng.gif" width="214" height="20" alt="Government of Canada" /></div></div></div>
<ul>
<li id="gcwu-gcnb1"><a rel="external" href="http://www.canada.gc.ca/home.html">Canada.gc.ca</a></li>
<li id="gcwu-gcnb2"><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml">Services</a></li>
<li id="gcwu-gcnb3"><a rel="external" href="http://www.canada.gc.ca/depts/major/depind-eng.html">Departments</a></li>
<li id="gcwu-gcnb-lang"><a href="#" lang="fr">Français</a></li>
</ul>
</div></div></div></nav>

<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in">
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbol of the Government of Canada"><img src="../../dist/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbol of the Government of Canada" /></div></div></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a href="../../index-eng.html">Web Experience Toolkit&#160;(WET)</a></p></div>

<section role="search"><div id="gcwu-srchbx"><h2>Search</h2>
<form action="#" method="post"><div id="gcwu-srchbx-in">
<label for="gcwu-srch">Search website</label><input id="gcwu-srch" name="gcwu-srch" type="text" value="" size="27" maxlength="150" />
<input id="gcwu-srch-submit" name="gcwu-srch-submit" type="submit" value="Search" data-icon="search" />
</div></form>
</div></section>
</div></div>

<nav role="navigation">
<div id="gcwu-psnb"><h2><span>Site </span>menu</h2><div id="gcwu-psnb-in"><div class="wet-boew-menubar mb-mega"><div>
<ul class="mb-menu" data-ajax-replace="../includes/menu-eng.txt">
<li><div><a href="http://wet-boew.github.com/wet-boew/index-eng.html">WET project</a></div></li>
<li><div><a href="section2/index-eng.html">Section 2</a></div></li>
<li><div><a href="#">Section 3</a></div></li>
<li><div><a href="#">Section 4</a></div></li>
<li><div><a href="#">Section 5</a></div></li>
<li><div><a href="#">Section 6</a></div></li>
<li><div><a href="#">Section 7</a></div></li>
</ul>
</div></div></div></div>

<div id="gcwu-bc"><h2>Breadcrumb trail</h2><div id="gcwu-bc-in">
<ol>
<li><a href="../../index-eng.html">Home</a></li>
<li><a href="../index-eng.html">Working examples</a></li>
<li>Table Usability - Web Experience Toolkit (WET)</li>
</ol>
</div></div>
</nav>
<!-- HeaderEnd -->
</header></div></div>

<div id="wb-core"><div id="wb-core-in" class="equalize">
<div id="wb-main" role="main"><div id="wb-main-in">
<!-- MainContentStart -->

<h1 id="wb-cont">Structuring the Header Row in a Data Table - Web Experience Toolkit (WET)</h1>


<div class="module-note span-6">
	<h2><span class="color-dark">Note:</span> Table Source Code Example</h2>
	<p>Id/Headers attribute, colgroup element and col element was omited intentionally for clarity.</p>
</div>

<div class="clear"></div>


<h2>Technique Author</h2>
<p>Name: Pierre Dubois</p>
<!-- <p>Email: Pierre Dubois at ic dot gc dot ca</p> -->

<h2>Technique Information</h2>

<h3>Technology</h3>
<p>HTML and XHTML Techniques</p>

<h3>Guidelines Reference</h3>
<p>Success Criterion 1.3.1 (Info and Relationships)</p>

<h3>Technique Title</h3>
<p>Structuring the Header Row in a Data Table<p>

<h3>Applicability</h3>
<p>Use for data tables when presence a row contain more than one cell header (td element).<p>

<h3>User Agent Issues</h3>
<p>Not Available<p>

<h3>Description of Technique</h3>

<p>The objective of this technique is to have the row cell header well structured and to avoid confusion between multiple heading in the same row.</p>

<p>The size is calculated with the value of the rowspan attribute. A row header cell next to any row header cell his size is always smaller. Two row header cell with the same size can not co-exist in the same row.</p>

<p>A row cell header can not be defined after any data cell. This exclude key cell and descriptive cell.</p>

<p>The row cell header are contained inside the colgroup header.</p>

<h2>Examples</h2>

<h3>Table 1</h3>

<table class="wet-boew-zebra">
	<caption>Table 1</caption>
	<colgroup>
		<col />
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	
	<tbody><tr>
		<th id="tbl6" rowspan="4">Row Header</th>
		<th headers="tbl6" id="tbl7">Row Header</th>
		<td headers="tbl6 tbl7">Data</td>
		<td headers="tbl6 tbl7">Data</td>
		<td headers="tbl6 tbl7">Data</td>
		<td headers="tbl6 tbl7">Data</td>
		<td headers="tbl6 tbl7">Data</td>
		<td headers="tbl6 tbl7">Data</td>
	</tr>
	<tr>
		<th headers="tbl6" id="tbl27">Row Header</th>
		<td headers="tbl6 tbl27">Data</td>
		<td headers="tbl6 tbl27">Data</td>
		<td headers="tbl6 tbl27">Data</td>
		<td headers="tbl6 tbl27">Data</td>
		<td headers="tbl6 tbl27">Data</td>
		<td headers="tbl6 tbl27">Data</td>
	</tr>
	<tr>
		<th headers="tbl6" id="tbl37">Row Header</th>
		<td headers="tbl6 tbl37">Data</td>
		<td headers="tbl6 tbl37">Data</td>
		<td headers="tbl6 tbl37">Data</td>
		<td headers="tbl6 tbl37">Data</td>
		<td headers="tbl6 tbl37">Data</td>
		<td headers="tbl6 tbl37">Data</td>
	</tr>
	<tr>
		<th headers="tbl6" id="tbl47">Row Header</th>
		<td headers="tbl6 tbl47">Data</td>
		<td headers="tbl6 tbl47">Data</td>
		<td headers="tbl6 tbl47">Data</td>
		<td headers="tbl6 tbl47">Data</td>
		<td headers="tbl6 tbl47">Data</td>
		<td headers="tbl6 tbl47">Data</td>
	</tr>
	<tr>
		<th id="tbl57" rowspan="2">Row Header</th>
		<th headers="tbl57" id="tbl58">Row Header</th>
		<td headers="tbl57 tbl58">Data</td>
		<td headers="tbl57 tbl58">Data</td>
		<td headers="tbl57 tbl58">Data</td>
		<td headers="tbl57 tbl58">Data</td>
		<td headers="tbl57 tbl58">Data</td>
		<td headers="tbl57 tbl58">Data</td>
	</tr>
	<tr>
		<th headers="tbl57" id="tbl68">Row Header</th>
		<td headers="tbl57 tbl68">Data</td>
		<td headers="tbl57 tbl68">Data</td>
		<td headers="tbl57 tbl68">Data</td>
		<td headers="tbl57 tbl68">Data</td>
		<td headers="tbl57 tbl68">Data</td>
		<td headers="tbl57 tbl68">Data</td>
	</tr>
	<tr>
		<th id="tbl78" colspan="2">Row Header</th>
		<td headers="tbl78">Data</td>
		<td headers="tbl78">Data</td>
		<td headers="tbl78">Data</td>
		<td headers="tbl78">Data</td>
		<td headers="tbl78">Data</td>
		<td headers="tbl78">Data</td>
	</tr>
</tbody></table>

<details>
	<summary>Table Source Code</summary>
<pre><code>
&lt;table class=&quot;wet-boew-zebra&quot;&gt;
	&lt;caption&gt;Table 1&lt;/caption&gt;
	
	&lt;tr&gt;
		&lt;th rowspan=&quot;4&quot;&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th colspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</details>


<h3>Table 2</h3>

<table class="wet-boew-zebra">
	<caption>Table 2</caption>
	<colgroup>
		<col />
		<col />
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	
	<tbody><tr>
		<th id="tbla6" rowspan="4">Row Header</th>
		<th headers="tbla6" id="tbla7" rowspan="2">Row Header</th>
		<th headers="tbla6 tbla7" id="tbla8">Row Header</th>
		<td headers="tbla6 tbla7 tbla8">Data</td>
		<td headers="tbla6 tbla7 tbla8">Data</td>
		<td headers="tbla6 tbla7 tbla8">Data</td>
		<td headers="tbla6 tbla7 tbla8">Data</td>
		<td headers="tbla6 tbla7 tbla8">Data</td>
	</tr>
	<tr>
		<th headers="tbla6 tbla7" id="tbla27">Row Header</th>
		<td headers="tbla6 tbla7 tbla27">Data</td>
		<td headers="tbla6 tbla7 tbla27">Data</td>
		<td headers="tbla6 tbla7 tbla27">Data</td>
		<td headers="tbla6 tbla7 tbla27">Data</td>
		<td headers="tbla6 tbla7 tbla27">Data</td>
	</tr>
	<tr>
		<th headers="tbla6" id="tbla36" rowspan="2">Row Header</th>
		<th headers="tbla6 tbla36" id="tbla37">Row Header</th>
		<td headers="tbla6 tbla36 tbla37">Data</td>
		<td headers="tbla6 tbla36 tbla37">Data</td>
		<td headers="tbla6 tbla36 tbla37">Data</td>
		<td headers="tbla6 tbla36 tbla37">Data</td>
		<td headers="tbla6 tbla36 tbla37">Data</td>
	</tr>
	<tr>
		<th headers="tbla6 tbla36" id="tbla46">Row Header</th>
		<td headers="tbla6 tbla36 tbla46">Data</td>
		<td headers="tbla6 tbla36 tbla46">Data</td>
		<td headers="tbla6 tbla36 tbla46">Data</td>
		<td headers="tbla6 tbla36 tbla46">Data</td>
		<td headers="tbla6 tbla36 tbla46">Data</td>
	</tr>
</tbody></table>

<details>
	<summary>Table Source Code</summary>
<pre><code>
&lt;table class=&quot;wet-boew-zebra&quot;&gt;
	&lt;caption&gt;Table 2&lt;/caption&gt;
	
	&lt;tr&gt;
		&lt;th rowspan=&quot;4&quot;&gt;Row Header&lt;/th&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</details>


<!--


<h3>Examples Titles</h3>


<details>
	<summary>Table Source Code</summary>
<pre><code></code></pre>
</details>

-->


<h2>Resources</h2>

<ul>
	<li><a href="validator-htmltable.html">HTML Table Validator</a> <em>(With ids/headers/aria-describedby auto assignation)</em></li>
	<li><a href="About-the-Table-Usability-Concept.html">About the Table Usability Concept</a></li>
	<li><a href="ExtendedDefinition.html">Extended definition of HTML5 table elements</a></li>
	<li><a href="index-eng.html">All the resources</a></li>
</ul>


<h2>Related Techniques</h2>

<ul>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/H51" rel="external">H51: Using table markup to present tabular information</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/H39" rel="external">H39: Using caption elements to associate data table captions with data tables</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/H73" rel="external">H73: Using the summary attribute of the table element to give an overview of data tables</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/H63" rel="external">H63: Using the scope attribute to associate header cells and data cells in data tables</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/H43" rel="external">H43: Using id and headers attributes to associate data cells with header cells in data tables</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/H79" rel="external">H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/F34" rel="external">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</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/F49" rel="external">F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/F46" rel="external">F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables</a></li>
	<li><a href="http://www.w3.org/TR/WCAG20-TECHS/G57" rel="external">G57: Ordering the content in a meaningful sequence</a></li>
</ul>


<h2>Test</h2>

<h3>Procedure</h3>
<ol>
	<li>If there is more than row cell header per row. Check if each subsequent row cell header is smaller than the previous one.</li>
</ol>
	
<h3>Expected Result</h3>

<ul>
	<li>#1 is true.</li>
</ul>
	
<h3>Test File 1</h3>
<p>This Test File 1 <strong>fail</strong> this technique. The HTML Table Validator would show a warning. See the Test File 6 for an example that would pass.</p>

<table>
	<caption>Table 3</caption>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

<details>
	<summary>Table Source Code</summary>
<pre><code>&lt;table&gt;
	&lt;caption&gt;Table 3&lt;/caption&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</details>
	

<h3>Test File 2</h3>
<p>This Test File 2 <strong>fail</strong> this technique</p>

<table>
	<caption>Table 4</caption>
	<tr>
		<th>Row Header</th>
		<th rowspan="2">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>
		<th rowspan="2">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>
</table>

<details>
	<summary>Table Source Code</summary>
<pre><code>
&lt;table&gt;
	&lt;caption&gt;Table 4&lt;/caption&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</details>
	

<h3>Test File 3</h3>
<p>This Test File 3 <strong>fail</strong> this technique</p>

<table>
	<caption>Table 5</caption>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
</table>

<details>
	<summary>Table Source Code</summary>
<pre><code>&lt;table&gt;
	&lt;caption&gt;Table 5&lt;/caption&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</details>
	

<h3>Test File 4</h3>
<p>This Test File 4 <strong>fail</strong> this technique</p>

<table>
	<caption>Table 6</caption>
	<tr>
		<th rowspan="2">Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
	<tr>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<th>Row Header</th>
		<td>Data</td>
	</tr>
</table>

<details>
	<summary>Table Source Code</summary>
<pre><code>&lt;table&gt;
	&lt;caption&gt;Table 6&lt;/caption&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;

</code></pre>
</details>
	

<h3>Test File 5</h3>
<p>This Test File 5 <strong>fail</strong> this technique</p>

<table>
	<caption>Table 7</caption>
	<tr>
		<th rowspan="2">Row Header</th>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<td rowspan="2">Data</td>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

<details>
	<summary>Table Source Code</summary>
<pre><code>&lt;table&gt;
	&lt;caption&gt;Table 7&lt;/caption&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;td rowspan=&quot;2&quot;&gt;Data&lt;/td&gt;
		&lt;td rowspan=&quot;2&quot;&gt;Data&lt;/td&gt;
		&lt;td rowspan=&quot;2&quot;&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;td rowspan=&quot;2&quot;&gt;Data&lt;/td&gt;
		&lt;td rowspan=&quot;2&quot;&gt;Data&lt;/td&gt;
		&lt;td rowspan=&quot;2&quot;&gt;Data&lt;/td&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;

</code></pre>
</details>


<h3>Test File 6</h3>
<p>This Test File 6 <strong>pass</strong> this technique. Even if the HTML Table Validator show an warning, this test pass because the heading row structure patern are not the same for all row. So here the paralel heading don't have the same signification as the one illustrated in the Test File 1.</p>

<table class="wet-boew-zebra">
	<caption>Table 3</caption>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th>Row Header</th>
		<th>Row Header</th>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
	<tr>
		<th rowspan="2">Row Header</th>
		<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 rowspan="2">Row Header</th>
		<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>
</table>

<details>
	<summary>Table Source Code</summary>
<pre><code>&lt;table&gt;
	&lt;caption&gt;Table 3&lt;/caption&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th rowspan=&quot;2&quot;&gt;Row Header&lt;/th&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Row Header&lt;/th&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
		&lt;td&gt;Data&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</details>
	

<!--
<h2>Additional Notes<h2>

<p>None</p>
-->

<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2013-04-10</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
</div></div>
</div></div>

<div id="wb-foot"><div id="wb-foot-in"><footer><h2 id="wb-nav">Footer</h2>
<!-- FooterStart -->
<nav role="navigation"><div id="gcwu-sft"><h3>Site footer</h3><div id="gcwu-sft-in">
<div id="gcwu-tctr">
<ul>
<li class="gcwu-tc"><a href="#" rel="license">Terms and conditions</a></li>
<li class="gcwu-tr"><a href="#">Transparency</a></li>
</ul>
</div>
<div class="clear"></div>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">About us</a></h4>
<ul>
<li><a href="#">Our Mandate</a></li>
<li><a href="#">Our Minister</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">News</a></h4>
<ul>
<li><a href="#">News releases</a></li>
<li><a href="#">Media advisories</a></li>
<li><a href="#">Multimedia</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Contact us</a></h4>
<address>
<ul>
<li><a href="#">Phone numbers</a></li>
<li><a href="#">Office locations</a></li>
</ul>
</address>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Stay connected</a></h4>
<ul>
<li><a rel="external" href="#">YouTube</a></li>
<li><a rel="external" href="#">Twitter</a></li>
<li><a href="#">Feeds</a></li>
</ul>
</div></section>
</div></div></nav>

<nav role="navigation"><div id="gcwu-gcft"><h3>Government of Canada footer</h3><div id="gcwu-gcft-in"><div id="gcwu-gcft-fip">
<ul>
<li><a rel="external" href="http://healthycanadians.gc.ca/index-eng.php"><span>Health</span><br />healthycanadians.gc.ca</a></li>
<li><a rel="external" href="http://www.voyage.gc.ca/index-eng.asp"><span>Travel</span><br />travel.gc.ca</a></li>
<li><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml"><span>Service Canada</span><br />servicecanada.gc.ca</a></li>
<li><a rel="external" href="http://www.jobbank.gc.ca/intro-eng.aspx"><span>Jobs</span><br />jobbank.gc.ca</a></li>
<li><a rel="external" href="http://actionplan.gc.ca/en"><span>Economy</span><br />actionplan.gc.ca</a></li>
<li id="gcwu-gcft-ca"><div><a rel="external" href="http://www.canada.gc.ca/home.html">Canada.gc.ca</a></div></li>
</ul>
</div></div></div></nav>
<!-- FooterEnd -->
</footer>
</div></div></div>

<!-- ScriptsStart -->
<script src="../../dist/theme-gcwu-fegc/js/theme-min.js"></script>
<script src="../../dist/js/settings.js"></script>
<script src="../../dist/js/pe-ap-min.js"></script>
<!-- ScriptsEnd -->
</body>
</html>