[whatwg] Proposals for better support of Tables

[Pierre Dubois]

On Tue, Nov 6, 2012 at 2:21 PM, Ian Hickson <ian at hixie.ch> wrote:
>
> On Mon, 7 Feb 2011, Alexandre Morgaut wrote:
> >
> > The HTML Table API provides powerful attributes like:
> > - "scope"
> > - "headers"
> > - "colspan"
> > - "rowspan"
> >
> > All of them give informations about relationships between the table
> > cells, rows, and columns
> >
> > It would be very helpful if:
> >  - each "th" element could have a "cells" property which would be the
> > HTML Collection of each "td" they are heading

Use case: Draw a graphic based on a data table
* Like a pie chart, based on a sub-set of data contained in a data table.

An issue can be when the header cell cover and/or represent more than
one group (eg. multiple tbody from a column perspective and multiple
colgroup from a row perspective)

> >  - each "td" element could have a "headerCells" property which would be
> > the HTML Collection of each of their related "th"

Use case: Draw a graphic based on a data table
* As described in the previous use case, this would allow, from a data
cell perspective, to retrieve the associated heading cell content to
associate/create an label to each quarter on the generated pie chart.

An issue with this is about the scope used for the HTMLCollection of
the headerCells property. I means is that would return headerCells for
a row perspective, for a column perspective, for a row group
perspective, for a column group perspective or all of them.

> >  - each cell element could have "rows" and "columns" properties which
> > would be the HTML collection of each rows and columns covered by their
> > rowspan and colspan attributes

Use case: Draw a pie chart based on a sub-set of data contained in a
data table and retrieve heading cell content associated to the data
cells.

This would be preferable to be used instead of having the "cells"
property on "th" and the "headerCells" property on "td".

The "rows" and "columns" HTMLCollection can contains reference of all
"tr" and "col" of the cells covered by it's rowspan and colspan
attribute.
However, it is possible to retrieves the cells, with current API, from
a row perspective "tr"  but not from column perspective "col". A
suggestion would to add a "cells" property to the "col" API.

Regarding the grouping issue, the "tr" and "col" API can have both a
property named "groupIndex" where it would be possible to know the
exact scope of the each cells in a row or column perspective.


> > Actually we can use getElementByClassName(), so we often see
> >
> > <tr><th id="th1" colspan="2">MySection</th></tr>
> > <tr><th id="th2" class="child-of-th1" scope="row">MyName</th><td>MyData</td></tr>
> > <tr><th id="th3" class="child-of-th2" scope="row">+ MySubName</th><td>MySubData</td></tr>
> >
> > instead of
> >
> > <tr><th id="th1" colspan="2">MySection</th></tr>
> > <tr><th id="th2" headers="th1" scope="row">MyName</th><td>MyData</td></tr>
> > <tr><th id="th3" headers="th1 th2" scope="row">+ MySubName</th><td>MySubData</td></tr>

In both, is the second row is data summary of the data contained in
the third row ? A data table like the Nutrition Facts Table ?
(http://wet-boew.github.com/wet-boew/demos/tableparser/Table-CaseStudies-2.html)

> Do you have examples of pages that are like this that would benefit from
> the API you describe?

http://wet-boew.github.com/wet-boew/demos/tableparser/Table-CaseStudies-3.html
http://wet-boew.github.com/wet-boew/demos/tableparser/rowgrouping-techniques.html

Initial design done by content provider to represent complex tabular
data contains sometime row grouping. But when it became to put them in
HTML and because of the complexity of making those complex table
accessible WCAG compliant they are split in several simple table
combined with a set of heading (<hx>). The <hx> is use in replacement
of the row group header. That force to repeat the column cells header
on each simple table instead of having a feature that would allow to
froze the column cells header during the scrolling. I would leave that
for later but this is one use case where is valuable to add a "level"
property to "tr", "col", "tbody" and "colgroup" API

Cheers

:-)

Pierre Dubois