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

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
elements<http://wet-boew.github.com/wet-boew/docs/tableparser/ExtendedDefinition.html>
.

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
Cell<http://wet-boew.github.com/wet-boew/docs/tableparser/keycell-techniques.html>
   2. Defining a Data Row
Group<http://wet-boew.github.com/wet-boew/docs/tableparser/rowgrouping-techniques.html>
   3. Summaries a Data Row
Group<http://wet-boew.github.com/wet-boew/docs/tableparser/summariesrowgroup-techniques.html>
   4. Structuring the Header
Row<http://wet-boew.github.com/wet-boew/docs/tableparser/headerrowgroupstructure-techniques.html>
   5. Describing a Row Header
Cell<http://wet-boew.github.com/wet-boew/docs/tableparser/rowheader-description-techniques.html>
   6. Describing a Row Group Header
Cell<http://wet-boew.github.com/wet-boew/docs/tableparser/rowgroupheader-description-techniques.html>
   7. Defining Column Group
Header<http://wet-boew.github.com/wet-boew/docs/tableparser/colgroupheader-techniques.html>
   8. Structuring the Header Column
Cell<http://wet-boew.github.com/wet-boew/docs/tableparser/headercolgroupstructure-techniques.html>
   9. Defining a Data Column
Group<http://wet-boew.github.com/wet-boew/docs/tableparser/datacolgroup-techniques.html>
   10. Summaries a Data Column
Group<http://wet-boew.github.com/wet-boew/docs/tableparser/colgroupsummary-techniques.html>
   11. Describing a Column Header
Cell<http://wet-boew.github.com/wet-boew/docs/tableparser/colheader-description-techniques.html>
   12. Defining a Layout
Cell<http://wet-boew.github.com/wet-boew/docs/tableparser/layoutcell-techniques.html>

*(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
table<http://wet-boew.github.com/wet-boew/docs/tableparser/zebra/columnhightlight.html>
* Simple table<http://wet-boew.github.com/wet-boew/docs/tableparser/zebra/simple.html>
* Simple grouping
table<http://wet-boew.github.com/wet-boew/docs/tableparser/zebra/simplegrouping.html>
* Invoice table<http://wet-boew.github.com/wet-boew/docs/tableparser/zebra/invoice.html>
* Row level with summary
table<http://wet-boew.github.com/wet-boew/docs/tableparser/zebra/rowlevelwithsummary.html>


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
table<http://wet-boew.github.com/wet-boew/docs/tableparser/Table-CaseStudies-2.html>
* Ottawa Senators vs. Buffalo Sabres - Game ID #
270519002<http://wet-boew.github.com/wet-boew/docs/tableparser/Table-CaseStudies-3.html>


Here is the latest source code of the table parser :
https://github.com/wet-boew/wet-boew/blob/master/src/js/workers/parser.table.js

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 :
http://wet-boew.github.com/wet-boew/docs/tableparser/validator-htmltable.html

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
structure<https://www.w3.org/Bugs/Public/show_bug.cgi?id=18791>
* Describing cell for an header cell in a data
table<https://www.w3.org/Bugs/Public/show_bug.cgi?id=18790>

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

Received on Thursday, 6 September 2012 15:38:23 UTC