Tables and HTML5 Table

This documentation is an interpretation of the author from his research and experience concerning the use and creation of a table. This documentation includes guidelines on how to create your table and make it work with the chart and graph javascript plug-in.

The following information is for Web publishers and can be useful for Web content providers.

Layout table vs. data table

Layout table

A layout table must be invisible to the end-user. It uses only the basic table markups like <table>, <tr> and <td>. Any other markup will create a data table. See F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables

The content of the table also needs to make sense when linearized. To see your linearized table, take the HTML code and remove any <tr>, <td> and try to read and understand the content. If you are able to, the layout table is good. see F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

Data table

A data table is used to show two or more dimensional content to the end-user. A data table includes a caption (H39: Using caption elements to associate data table captions with data tables) and a table summary/description. A table uses the appropriate markups to present tabular information (H51)

Each data cell (<td>) inside needs to be represented by a minimum of two unique headings (<th>). Also, the table needs to be structured so that when it is rendered, for each row, there is the same number of columns (spanned or not). A <caption>, <thead> section, one or more <tbody> is required. The <tfoot> is optional and is the same as column grouping <colgroup>, <col>.

This is not about creating tables that are using ID and headers attributes to associate data cells with header cells in data tables (H43). It is recommended to avoid those tables and to use basic tables, hierarchical headings or a table combined with multiple data row grouping (<tbody>) section.

What’s best?

Data tables are best because the layout table solution can be more easily reproduced with the <div> element combined with the appropriate CSS.

Graph and data table

First, inside the graph plug-in, there is a “table parser” that requires you to create a well-structured table. If you don’t, the graphic you are trying to generate won’t be shown.

What’s required?

The minimal requirement is for each data cell (<td>) inside to be represented by at least two unique headings (<th>). The table needs to be structured so that when it is rendered, for each row, there is the same number of columns (spanned or not). A <caption>, <thead>, one or more <tbody>.

My table caption

	Column 1
Row 1	123

<!-- Minimal table requirement -->
<table>
   <caption>My table caption</caption>
   <thead>
      <tr>
         <th></th>
         <th>Column 1</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Row 1</th>
         <td>123</td>
      </tr>
   </tbody>
</table>

What’s supported?

Multiple data row grouping

Each row grouping will generate a new graphic to the dataset.

<!-- Multiple tbody section -->
<!-- [..] -->
   <tbody>
      <tr>
         <!-- [..] -->
      </tr>
      <!-- [..] -->
   </tbody>
   <tbody>
      <tr>
         <!-- [..] -->
      </tr>
      <!-- [..] -->
   </tbody>
<!-- [..] -->

Hierarchical headings are partially supported

My table caption

		Column 1	Column 2
			Column 2a	Column 2b
Row 1	Row 1a	123	456	789
	Row 1b	123	456	789
Row 2		123	456	789

<!-- Hierarchical heading table -->
<table>
   <caption>My table caption</caption>
   <thead>
      <tr>
         <th colspan="2" rowspan="2"></th>
         <th rowspan="2">Column 1</th>
         <th colspan="2">Column 2</th>
      </tr>
      <tr>
         <th>Column 2a</th>
         <th>Column 2b</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th rowspan="2">Row 1</th>
         <th>Row 1a</th>
         <td>123</td>
         <td>456</td>
         <td>789</td>
      </tr>
      <tr>
         <th>Row 1b</th>
         <td>123</td>
         <td>456</td>
         <td>789</td>
      </tr>
      <tr>
         <th colspan="2">Row 2</th>
         <td>123</td>
         <td>456</td>
         <td>789</td>
      </tr>
   </tbody>
</table>

What’s not supported?

For the pie chart, when generated, the table row hierarchy is not visually represented. If that kind of information is present inside the table, it will just be ignored. As for the table heading hierarchy, they are not visually represented inside the legend.

For the 2D axis graph (line, bar, stacked, area), the table row hierarchy is not represented inside the legend.

The following table tags are currently ignored: <colgroup>, <col> and <tfoot>. The tfoot element will be supported in a future version.

How to create a complex table?

Is ids/headers attribute are required ?

Yes, it’s required until a sufficient technique will show how to use the row grouping method. Ids/headers was omited in the example in this documentation to keep it clear.

Historical, row grouping method was defined for viusal user agent when the table are printed. The row in the thead element are repeated on each printed page as table header and the row in the tfoot element are repeated on each printed page as table footer.

The graph plugin add value to the thead and tbody element by supporting the hiarchical heading. But because, at this time, no sufficient technique are showing how to use the row grouping method, ids/headers attribute are required.

Because of that confusion, three new sufficient techniques was submited to the WCAG working group,

• HTML and XHTML Techniques – Using table row grouping to associate data cells with header cells in data tables
• HTML and XHTML Techniques – Identifying data group (tbody) in a data table
• HTML and XHTML Techniques – Using table row grouping to associate data cells with ids/headers

Some investigation will be done later if ids/headers set by a script will remains WCAG 2.0 Level AA compliant.

Simple table

Before creating any complex table, you must know what a simple table is. There are those with row grouping, and those that do not require additional markups to make them accessible. Also, the <caption> element (table title) is always required See: H39: Using caption elements to associate data table captions with data tables

Without row grouping tags and without scope

A Simple table NOT WCAG 2.0

Col a	Col b	Col c	Col d
Row 1	Cell b1	Cell c1	Cell d1
Row 2	Cell b2	Cell c2	Cell d2
Row 3	Cell b3	Cell c3	Cell d3

<!-- Simple table - NOT WCAG 2.0 -->
<table>
	<caption>A Simple table <strong>NOT</strong> WCAG 2.0</caption>
	<tr>
		<th>Col a</th>
		<th>Col b</th>
		<th>Col c</th>
		<th>Col d</th>
	</tr>
	<tr>
		<th>Row 1</th>
		<td>Cell b1</td>
		<td>Cell c1</td>
		<td>Cell d1</td>
	</tr>
	<tr>
		<th>Row 2</th>
		<td>Cell b2</td>
		<td>Cell c2</td>
		<td>Cell d2</td>
	</tr>
	<tr>
		<th>Row 3</th>
		<td>Cell b3</td>
		<td>Cell c3</td>
		<td>Cell d3</td>
	</tr>
</table>

First that previous table is not WCAG 2.0 compliant. This is because there is a confusion between the row heading and the column heading because they are inside the same container. see H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings

To make the table WCAG 2.0 compliant, we must scope the table headings and specify which heading is used, eg.

A Simple table WCAG 2.0 using scope

Col a	Col b	Col c	Col d
Row 1	Cell b1	Cell c1	Cell d1
Row 2	Cell b2	Cell c2	Cell d2
Row 3	Cell b3	Cell c3	Cell d3

<!-- Simple table - WCAG 2.0 -->
<table>
	<caption>A Simple table WCAG 2.0 using scope</caption>
	<tr>
		<th scope="col">Col a</th>
		<th scope="col">Col b</th>
		<th scope="col">Col c</th>
		<th scope="col">Col d</th>
	</tr>
	<tr>
		<th scope="row">Row 1</th>
		<td>Cell b1</td>
		<td>Cell c1</td>
		<td>Cell d1</td>
	</tr>
	<tr>
		<th scope="row">Row 2</th>
		<td>Cell b2</td>
		<td>Cell c2</td>
		<td>Cell d2</td>
	</tr>
	<tr>
		<th scope="row">Row 3</th>
		<td>Cell b3</td>
		<td>Cell c3</td>
		<td>Cell d3</td>
	</tr>
</table>

The previous tables are WCAG 2.0, scoped tables are currently not supported by the graph plug-in, and won’t be in any near future.

With row grouping tag

Here, there is no requirement to use the heading scope, because the row grouping defines exactly the purpose of the <th> element.

A Simple table WCAG 2.0 using row grouping

Col a	Col b	Col c	Col d
Row 1	Cell b1	Cell c1	Cell d1
Row 2	Cell b2	Cell c2	Cell d2
Row 3	Cell b3	Cell c3	Cell d3

<!-- Simple table - WCAG 2.0 -->
<table>
	<caption>A Simple table WCAG 2.0 using row grouping</caption>
	<thead>
		<tr>
			<th>Col a</th>
			<th>Col b</th>
			<th>Col c</th>
			<th>Col d</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row 1</th>
			<td>Cell b1</td>
			<td>Cell c1</td>
			<td>Cell d1</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Cell b2</td>
			<td>Cell c2</td>
			<td>Cell d2</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Cell b3</td>
			<td>Cell c3</td>
			<td>Cell d3</td>
		</tr>
	</tbody>
</table>

As you can see, the <thead> section defines the table column heading, and the <tbody> section defines the data cell.

This is about the most simple table supported by the graph plug-in. The plug-in interprets any <tr> as a serie.

Hierarchical table

Without row grouping tag and without scope

A Hierarchical table NOT WCAG 2.0

Col a		Col b		Col c
		Col b-a	Col b-b	Col c-a	Col c-b
Row 1	Row 1-1	Cell b-a-1	Cell b-b-1	Cell c-a-1	Cell c-b-1
	Row 1-2	Cell b-a-1-2	Cell b-b-1-2	Cell c-a-1-2	Cell c-b-1-2
Row 2	Row 2-1	Cell b-a-2-1	Cell b-b-2-1	Cell c-a-2-1	Cell c-b-2-1
	Row 2-2	Cell b-a-2-2	Cell b-b-2-2	Cell c-a-2-2	Cell c-b-2-2

<!-- Hierarchical table - NOT WCAG 2.0 -->
<table>
	<caption>A Hierarchical table <strong>NOT</strong> WCAG 2.0</caption>
	<tr>
		<th colspan="2" rowspan="2">Col a</th>
		<th colspan="2">Col b</th>
		<th colspan="2">Col c</th>
	</tr>
	<tr>
		<th>Col b-a</th>
		<th>Col b-b</th>
		<th>Col c-a</th>
		<th>Col c-b</th>
	</tr>
	<tr>
		<th rowspan="2">Row 1</th>
		<th>Row 1-1</th>
		<td>Cell b-a-1</td>
		<td>Cell b-b-1</td>
		<td>Cell c-a-1</td>
		<td>Cell c-b-1</td>
	</tr>
	<tr>
		<th>Row 1-2</th>
		<td>Cell b-a-1-2</td>
		<td>Cell b-b-1-2</td>
		<td>Cell c-a-1-2</td>
		<td>Cell c-b-1-2</td>
	</tr>
	<tr>
		<th rowspan="2">Row 2</th>
		<th>Row 2-1</th>
		<td>Cell b-a-2-1</td>
		<td>Cell b-b-2-1</td>
		<td>Cell c-a-2-1</td>
		<td>Cell c-b-2-1</td>
	</tr>
	<tr>
		<th>Row 2-2</th>
		<td>Cell b-a-2-2</td>
		<td>Cell b-b-2-2</td>
		<td>Cell c-a-2-2</td>
		<td>Cell c-b-2-2</td>
	</tr>
</table>

Do not use that kind of table. It may be clear for the end-user, but it’s impossible to get the heading relation at all because <th> are used in four different purposes, such as column grouping, column, row grouping and row. See with the scope what can be done.

With scope

A Hierarchical table WCAG 2.0 using scope

Col a		Col b		Col c
		Col b-a	Col b-b	Col c-a	Col c-b
Row 1	Row 1-1	Cell b-a-1	Cell b-b-1	Cell c-a-1	Cell c-b-1
	Row 1-2	Cell b-a-1-2	Cell b-b-1-2	Cell c-a-1-2	Cell c-b-1-2
Row 2	Row 2-1	Cell b-a-2-1	Cell b-b-2-1	Cell c-a-2-1	Cell c-b-2-1
	Row 2-2	Cell b-a-2-2	Cell b-b-2-2	Cell c-a-2-2	Cell c-b-2-2

<!-- Hierarchical table -->
<table>
	<caption>A Hierarchical table WCAG 2.0 using scope</caption>
	<tr>
		<th scope="colgroup" colspan="2" rowspan="2">Col a</th>
		<th scope="colgroup" colspan="2">Col b</th>
		<th scope="colgroup" colspan="2">Col c</th>
	</tr>
	<tr>
		<th scope="col">Col b-a</th>
		<th scope="col">Col b-b</th>
		<th scope="col">Col c-a</th>
		<th scope="col">Col c-b</th>
	</tr>
	<tr>
		<th scope="rowgroup" rowspan="2">Row 1</th>
		<th scope="row">Row 1-1</th>
		<td>Cell b-a-1</td>
		<td>Cell b-b-1</td>
		<td>Cell c-a-1</td>
		<td>Cell c-b-1</td>
	</tr>
	<tr>
		<th scope="row">Row 1-2</th>
		<td>Cell b-a-1-2</td>
		<td>Cell b-b-1-2</td>
		<td>Cell c-a-1-2</td>
		<td>Cell c-b-1-2</td>
	</tr>
	<tr>
		<th scope="rowgroup" rowspan="2">Row 2</th>
		<th scope="row">Row 2-1</th>
		<td>Cell b-a-2-1</td>
		<td>Cell b-b-2-1</td>
		<td>Cell c-a-2-1</td>
		<td>Cell c-b-2-1</td>
	</tr>
	<tr>
		<th scope="row">Row 2-2</th>
		<td>Cell b-a-2-2</td>
		<td>Cell b-b-2-2</td>
		<td>Cell c-a-2-2</td>
		<td>Cell c-b-2-2</td>
	</tr>
</table>

The previous example show the limit of the scope attribute. But you will see them into a different context by using the row grouping.

The previous tables are WCAG 2.0, scoped tables are currently not supported by the graph plug-in, and won’t be in any near future.

With row grouping tag

A Hierarchical table WCAG 2.0 using row grouping

Col a		Col b		Col c
		Col b-a	Col b-b	Col c-a	Col c-b
Row 1	Row 1-1	Cell b-a-1	Cell b-b-1	Cell c-a-1	Cell c-b-1
	Row 1-2	Cell b-a-1-2	Cell b-b-1-2	Cell c-a-1-2	Cell c-b-1-2
Row 2	Row 2-1	Cell b-a-2-1	Cell b-b-2-1	Cell c-a-2-1	Cell c-b-2-1
	Row 2-2	Cell b-a-2-2	Cell b-b-2-2	Cell c-a-2-2	Cell c-b-2-2

<!-- Hierarchical table - WCAG 2.0 using row grouping -->
<table>
	<caption>A Hierarchical table WCAG 2.0 using row grouping </caption>
	<thead>
		<tr>
			<th colspan="2" rowspan="2">Col a</th>
			<th colspan="2">Col b</th>
			<th colspan="2">Col c</th>
		</tr>
		<tr>
			<th>Col b-a</th>
			<th>Col b-b</th>
			<th>Col c-a</th>
			<th>Col c-b</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th rowspan="2">Row 1</th>
			<th>Row 1-1</th>
			<td>Cell b-a-1</td>
			<td>Cell b-b-1</td>
			<td>Cell c-a-1</td>
			<td>Cell c-b-1</td>
		</tr>
		<tr>
			<th>Row 1-2</th>
			<td>Cell b-a-1-2</td>
			<td>Cell b-b-1-2</td>
			<td>Cell c-a-1-2</td>
			<td>Cell c-b-1-2</td>
		</tr>
		<tr>
			<th rowspan="2">Row 2</th>
			<th>Row 2-1</th>
			<td>Cell b-a-2-1</td>
			<td>Cell b-b-2-1</td>
			<td>Cell c-a-2-1</td>
			<td>Cell c-b-2-1</td>
		</tr>
		<tr>
			<th>Row 2-2</th>
			<td>Cell b-a-2-2</td>
			<td>Cell b-b-2-2</td>
			<td>Cell c-a-2-2</td>
			<td>Cell c-b-2-2</td>
		</tr>
	</tbody>
</table>

With this method, you are able to set many grouping headers (as row or column) without loosing any information or context. That is the kind of tables used by graph plug-in.

Multiple <tbody>, how?

As per the table specification, there are three tags available to create row groupings and two tags available to create column grouping.

Respect the order

The table grouping tags need to respect the following sequence.

1. <caption>
2. <colgroup> if there is no span attribute, its column child is required (Repeat as needed)
   1. <col> child of colgroup
3. <thead>
4. <tfoot>
5. <tbody> (Repeat as needed)

How to use multiple <tbody> or/and <colgroup>

Multiple tbody WCAG 2.0 using row grouping

Col a	Col b	Col c	Col d
First Group
Row 1	Cell b1	Cell c1	Cell d1
Row 2	Cell b2	Cell c2	Cell d2
Row 3	Cell b3	Cell c3	Cell d3
Second Group
Row 1	Cell b1	Cell c1	Cell d1
Row 2	Cell b2	Cell c2	Cell d2
Row 3	Cell b3	Cell c3	Cell d3

<!-- Multiple tbody - WCAG 2.0 -->
<table>
	<caption>Multiple tbody WCAG 2.0 using row grouping</caption>
	<thead>
		<tr>
			<th>Col a</th>
			<th>Col b</th>
			<th>Col c</th>
			<th>Col d</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="rowgroup" colspan="4">First Group</th> 
		</tr>
		<tr>
			<th>Row 1</th>
			<td>Cell b1</td>
			<td>Cell c1</td>
			<td>Cell d1</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Cell b2</td>
			<td>Cell c2</td>
			<td>Cell d2</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Cell b3</td>
			<td>Cell c3</td>
			<td>Cell d3</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" colspan="4">Second Group</th> 
		</tr>
		<tr>
			<th>Row 1</th>
			<td>Cell b1</td>
			<td>Cell c1</td>
			<td>Cell d1</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Cell b2</td>
			<td>Cell c2</td>
			<td>Cell d2</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Cell b3</td>
			<td>Cell c3</td>
			<td>Cell d3</td>
		</tr>
	</tbody>
</table>

As you can see, each <tbody> group can be identified by using the scope “rowgroup”. In this specific case, only one <th> element can have the scope “rowgroup” because any other will create a confusion in the same group.

The HTML5 specification require the scope to identifying the group.

As the sufficient technique G57: Ordering the content in a meaningful sequence the group identifier may be the first cell heading.

Remember, you can still have hierarchical information inside that kind of table structure.

Column grouping

The <colgroup> and <col> are there to represent similar functionality of row grouping. So far, I have not seen any special visual support for those tags, but it can be a good idea for a new project in the future, eg. supporting their generic attributes as class.

Conclusion

The “header” attribute was not mentioned and use of “scope” inside a complex table are not recommended. This is because the same can be easily done by using the row grouping, col grouping and the hierarchical heading. If you can’t use that kind of format and you need to use “header” and “id” attribute, ask yourself this question : Does my table make sense when it’s linearized?

How to create a summary/description table in HTML 5, and why it is important ?

It depends on how your table is structured and how your content is orgranized inside the table. If the table is built right (see the W3C citation bellow) the description becomes optional. If you need or want to add a table description, there are two techniques based on the table context.

Table context

HTML5 – 4.9.1.1 Techniques for describing tables

• Add the description in a paragraph <p> just before the <table> element. In prose, surrounding the table, or
• Add the description inside the <caption> element
• The best option, of course, rather than writing a description explaining the way the table is laid out, is to adjust the table so that no explanation is needed. (citation from W3C Editor’s Draft)

Describe the table by using the Collapse plug-in

A Simple table with description WCAG 2.0 using row grouping

Description

Description example for a simple table

Col a	Col b	Col c	Col d
Row 1	Cell b1	Cell c1	Cell d1
Row 2	Cell b2	Cell c2	Cell d2
Row 3	Cell b3	Cell c3	Cell d3

<!-- Simple table with description - WCAG 2.0 -->
<table>
	<caption>A Simple table with description WCAG 2.0 using row grouping
		<div class="toggle-content collapse">
			<p class="expandtitle">Description</p>
			<p>Description example for a simple table</p>
		</div>
	</caption>
	<thead>
		<tr>
			<th>Col a</th>
			<th>Col b</th>
			<th>Col c</th>
			<th>Col d</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row 1</th>
			<td>Cell b1</td>
			<td>Cell c1</td>
			<td>Cell d1</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Cell b2</td>
			<td>Cell c2</td>
			<td>Cell d2</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Cell b3</td>
			<td>Cell c3</td>
			<td>Cell d3</td>
		</tr>
	</tbody>
</table>

Or by using the HTML 5 tag,

A Simple table with description WCAG 2.0 using row grouping

Description

Description example for a simple table

Col a	Col b	Col c	Col d
Row 1	Cell b1	Cell c1	Cell d1
Row 2	Cell b2	Cell c2	Cell d2
Row 3	Cell b3	Cell c3	Cell d3

<!-- Simple table with description - WCAG 2.0 -->
<table>
	<caption>A Simple table with description WCAG 2.0 using row grouping
		<details>
			<summary>Description</summary>
			<p>Description example for a simple table</p>
		</details>
	</caption>
	<thead>
		<tr>
			<th>Col a</th>
			<th>Col b</th>
			<th>Col c</th>
			<th>Col d</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row 1</th>
			<td>Cell b1</td>
			<td>Cell c1</td>
			<td>Cell d1</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Cell b2</td>
			<td>Cell c2</td>
			<td>Cell d2</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Cell b3</td>
			<td>Cell c3</td>
			<td>Cell d3</td>
		</tr>
	</tbody>
</table>

You can see more examples in the HTML5 draft, like how to describe a figure. HTML5 – 4.9.1.1 Techniques for describing tables

How to describe a table header <th>

Sometimes, columns and rows need to be described.

The column heading description is located inside the <thead> element in a row below the header to describe. The row header description is in a column next to the header to describe. We use <td> element to insert the heading description.

Describe a table header

Col a		Col b	Col c	Col d
		Description of Col b	Description of Col c	Description of Col d
Row 1	Description of Row 1	Cell b1	Cell c1	Cell d1
Row 2	Description of Row 2	Cell b2	Cell c2	Cell d2
Row 3	Description of Row 3	Cell b3	Cell c3	Cell d3

<!-- Describe a table header - WCAG 2.0 -->
<table>
	<caption>Describe a table header</caption>
	<thead>
		<tr>
			<th rowspan="2" colspan="2">Col a</th>
			<th>Col b</th>
			<th>Col c</th>
			<th>Col d</th>
		</tr>
		<tr>
			<td>Description of Col b</td>
			<td>Description of Col c</td>
			<td>Description of Col d</td>
		</tr>	
	</thead>
	<tbody>
		<tr>
			<th>Row 1</th>
			<td>Description of Row 1</td>
			<td>Cell b1</td>
			<td>Cell c1</td>
			<td>Cell d1</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Description of Row 2</td>
			<td>Cell b2</td>
			<td>Cell c2</td>
			<td>Cell d2</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Description of Row 3</td>
			<td>Cell b3</td>
			<td>Cell c3</td>
			<td>Cell d3</td>
		</tr>
	</tbody>
</table>

Table cell merging

The graph plug-in support cells merged (a td and/or th with a rowspan and/or colspan greater than 1).

What happened to the generated graphic? Nothing special. The cells merged are interpreted as a way to display the data in a nicer way inside the table.

See the above table, both are equivalent and produce the same result.

Cell and table header, with rowspan and colspan greater than 1

		Column 1	Column 2	Column 3
Row Grouping	Row 1	123		0
	Row 2

<!-- Table cell merged - WCAG 2.0 -->

<table class="wet-graph wb-graph-width-402">
 <caption>Cell and table header, with rowspan and colspan greater than 1</caption>
 <thead>
  <tr>
   <th colspan="2"></th>
   <th>Column 1</th>
   <th>Column 2</th>
   <th>Column 3</th>
  </tr>
 </thead>
 <tbody class="wb-graph-bar">
  <tr>
   <th rowspan="2">Row Grouping</th>
   <th>Row 1</th>
   <td colspan="2" rowspan="2">123</td>
   <td rowspan="2">0</td>
  </tr>
  <tr>
   <th>Row 2</th>
  </tr>
 </tbody>
</table>

are equivalent to

Cell and table header, interpretated by the graph plug-in

		Column 1	Column 2	Column 3
Row Grouping	Row 1	123	123	0
	Row 2	123	123	0

<table class="wet-graph wb-graph-width-402">
 <caption>Cell and table header, interpretated by the graph plug-in</caption>
 <thead>
  <tr>
   <th colspan="2"></th>
   <th>Column 1</th>
   <th>Column 2</th>
   <th>Column 3</th>
  </tr>
 </thead>
 <tbody class="wb-graph-bar">
  <tr>
   <th rowspan="2">Row Grouping</th>
   <th>Row 1</th>
   <td>123</td>
   <td>123</td>
   <td>0</td>
  </tr>
  <tr>
   <th>Row 2</th>
   <td>123</td>
   <td>123</td>
   <td>0</td>
  </tr>
 </tbody>
</table>

Relevant documentation

• HTML5 – 4.9 Tabular data
• 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
• Techniques for WCAG 2.0 – W3C Editor’s Draft
• Submitted technique – HTML and XHTML Techniques – Using table row grouping to associate data cells with header cells in data tables
• Submitted technique – HTML and XHTML Techniques – Identifying data group (tbody) in a data table
• Submitted technique – HTML and XHTML Techniques – Using table row grouping to associate data cells with ids/headers
• Improving the accessibility of tables