[whatwg] Proposal about the table cell relationship combined with the column grouping and the row grouping

Pierre Dubois duboisp2 at gmail.com
Thu Sep 6 08:37:53 PDT 2012

Hi there,

I developed a javascript table parser based on my research. The parser is
able to understand complex relationship in a data table. The relationship
association is based on the current algorithm and take in consideration how
the header cell (th) is structured, positioned and spanned. All of this is
combined on how the column grouping (colgroup) and the row grouping (thead,
tbody) is structured.

My research was based on usability and common use of table. My goal was to
find how the HTML markup can be used to represent a complex table based on
how a person would understand the complex table by viewing it in a user
agent and on paper.

My research led me to extend the current definition of the table elements
(table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td) and I
tried to understand the table without discriminating row and column. See
the Extended definition of HTML 5 table

Described in the extended definition, here is a quick list of the 7
different types for a cell (th and td) can have.

Header cell (th) types

* Header
* Layout
* Header group

Data cell (td) types

* Data
* Summary
* Key
* Description
* Layout

This concept use the row grouping (thead and multiple tbody) and the column
grouping (colgroup) to define data summaries. This can be used to reduce
the table size when it's needed to be displayed in a smaller screen, like a
mobile device.

I would also like to propose adding a method on how data table size (the
visual aspect) can be reduced by an user agent instead of just overflow off
screen in the specification.

Based on the table usability concept, I developed the javascript table
parser and drafted 12 techniques to help web editor to understand and use
this concept.

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

*(FYI, the intention behind of those techniques are for a future submission
to the WCAG 2.0 Techniques*)

As part of the Web Experience Toolkit (WET) project, I enhanced a zebra
widget to support those complex table as well.

Here are some examples:

* Column highlight
* Simple table<http://wet-boew.github.com/wet-boew/docs/tableparser/zebra/simple.html>
* Simple grouping
* Invoice table<http://wet-boew.github.com/wet-boew/docs/tableparser/zebra/invoice.html>
* Row level with summary

I documented 3 case studies on how a current table can be updated to create
a more usable table.

* Case Studies #1<http://wet-boew.github.com/wet-boew/docs/tableparser/Table-CaseStudies.html>
* Nutrition Facts
* Ottawa Senators vs. Buffalo Sabres - Game ID #

Here is the latest source code of the table parser :

The following table validator use the table parser and show structural
table error and provide a revised version of the table with the
ids/header/aria-describedby auto set :

I also I submitted two bugs in the w3c public bug database related to this
topic that can be seen below.

* Reducing data table size based on the row grouping, column grouping
combined with the table header cell
* Describing cell for an header cell in a data

I would be open to comments and suggestions that could results in future
improvements. I would also be willing to share the outcome of my research
to be included in the specifications.

Thank you


Pierre Dubois

More information about the whatwg mailing list