The guideline is about how an web editor should design complex and simple table.

• How to add a data group summary
• How to organize the group header (eg. thead for the row group)
• How to desing your data group (eg. tbody for the row group)
• How to have multi information level in your complex table
• How to name your data group
• How to use the colgroup and col tag
• How you can have nested data table

That is and more about what the guideline will cover. Also I will develop a javascript table parser with the capability to understand those table and query them. The table query will be integrated with the jquery selector and also behalf a function with the ability to retrieve the virtual structural information.

Keep posted !

What is the result ?

What you need …

First you need to create an well formatted HTML table by using the table row grouping. Check the article about How to create a HTML5 table.

After you have coded your data table, you will need to include 3 files to the head section of your web page and the jQuery library (v1.4.4 or higher) and Raphaël JavaScript Library (v2.0 or higher).

<link href="css/graph2-0style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/charts.jQuery.js"></script>

Download the zip file (90 Kb)

How to use it ?

The same way as the majority of existing JQuery plugin by using the progressive enhancement approach.  See here a sample you can include in your head of your web page

<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('.wet-boew-graph').charts();
   });
//]]>
</script>

After you only need to add the CSS class “wet-boew-graph” to your table used as source for generating the graphic. By default, the type of graphic generated are line graph, but that can be fully customized by using CSS Option Class.

Here an example of a simple table.

 <table class="wet-boew-graph">
    <caption>2009 Individual Sales by Category</caption>
    <thead>
        <tr>
            <td></td>
            <th>food</th>
            <th>auto</th>
            <th>household</th>
            <th>furniture</th>
            <th>kitchen</th>
            <th>bath</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Peter</th>
            <td>350</td>
            <td>100</td>
            <td>-50</td>
            <td>400</td>
            <td>100</td>
            <td>70</td>
        </tr>
    </tbody>
</table>

Now you can enjoy you accessible graphic.

Please note

The graphic widget are not affected by ids/headers attribute and currently any scope value because the table are parsed by is markup structure. The graphic widget will generate unique ids, if they don’t exist, for each heading cell and for the table itself. Also if present or not, the headers attribute will be set or reset accordingly the way the table are parsed and understood by the graph widget.

Quick tips: If you want to set ids/headers attributes to your table markup, you can run the widget first, extract the live table source code with an utility, like firebug, and paste directly in your HTML markup. That is a safe way and easiest way to assign ids/headers to your data table.

How to customize your graphic ?

Change the graph type

The graph type are defined with CSS class added to the table, tbody or tr element. It’s possible to combine multiple graph type together and generate an awesome graphic. The exception are the pie chart, this one can not be combined yet.

Line graph

css class: wb-graph-line

<table class="wet-boew-graph wb-graph-line">

or

<tbody class="wb-graph-line">

or

<tr>
   <th class="wb-graph-line">Peter</th>
   <td>350</td>
   <td>100</td>
   <td>-50</td>
   <td>400</td>
   <td>100</td>
   <td>70</td>
</tr>

Area graph

css class: wb-graph-area

<table class="wet-boew-graph wb-graph-area">

or

<tbody class="wb-graph-area">

or

<tr>
   <th class="wb-graph-area">Peter</th>
   <td>350</td>
   <td>100</td>
   <td>-50</td>
   <td>400</td>
   <td>100</td>
   <td>70</td>
</tr>

Bar graph

css class: wb-graph-line

<table class="wet-boew-graph wb-graph-bar">

or

<tbody class="wb-graph-bar">

or

<tr>
   <th class="wb-graph-bar">Peter</th>
   <td>350</td>
   <td>100</td>
   <td>-50</td>
   <td>400</td>
   <td>100</td>
   <td>70</td>
</tr>

Stacked graph

css class: wb-graph-stacked

<table class="wet-boew-graph wb-graph-stacked">

or

<tbody class="wb-graph-stacked">

or

<tr>
   <th class="wb-graph-stacked">Peter</th>
   <td>350</td>
   <td>100</td>
   <td>-50</td>
   <td>400</td>
   <td>100</td>
   <td>70</td>
</tr>

Pie graph

css class: wb-graph-line

<table class="wet-boew-graph wb-graph-pie">

or

<tbody class="wb-graph-pie">

More customization ?

They exist more customization like changing the colour, … That will be discussed in a further article about how to create a complex accessible graphic.

What is “wet-boew” prefix ?

The “wet-boew” prefix stand for in English “Web Experience Toolkit” and in French for “Boîte à Outils de l’Expérience Web”.

The WET toolbox are an integration of several open source javascript projects, modified some time to be accessible (WCAG 2.0 Level AA compliant). This plugin was developed from scratch and managed by me under the WET toolbox. If you found bugs or if you want to make any improvement suggestion, you can do it behalf the chart and graph project web page.

License, Terms and Conditions of Use

Web Experience Toolkit (WET) – Terms and Conditions of Use

Unless otherwise noted, computer program source code of the Web Experience Toolkit (WET) is covered under Crown Copyright, Government of Canada, and is distributed under the MIT License.

The Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada’s corporate identity program. For more information, see http://www.tbs-sct.gc.ca/fip-pcim/index-eng.asp

Copyright title to all 3rd party software distributed with the Web Experience Toolkit (WET) is held by the respective copyright holders as noted in those files. Users are asked to read the 3rd Party Licenses referenced with those assets.

MIT License

Copyright (c) 2012 Government of Canada

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

3rd party software distributed

• jQuery – jQuery license (MIT/GPL v2.0)
• Raphaël—JavaScript Library – MIT license

What is the purpose of each file in the attached zip ?

raphael-min.js : That is the library used to draw inside the web page. It’s use SVG and VML for IE. That library is similar to the canvas element in HTML5.

jquery-1.7.1.min.js : This is the main library used by the chart widget to analyze the table, calculate and design the graphic.

charts.jQuery.js : This is the graph widget.

graph2-0style.css : This is simple CSS code regarding how to style the HTML5 figure and figcaption element.

What’s next ?

In a future blog post, I will explain how to generate a complex graphic and also how to do more customization like changing the color of the line, bar, stacked bar, area or pie quarter in your graphic.

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

<!-- 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

<!-- 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

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

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

<!-- 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

<!-- 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

<!-- 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

<!-- 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 -->
<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

<!-- 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,

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

<!-- 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

<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