Complex Tables

NOTE: This page is around the issue of complex tables and mechanisms such as @scope, @axis and @headers that may be used to solve this issue. For consideration of backwards compatibility issues for @headers see the page: Maintaining table data/header association in a backwards compatible way with existing Aural browsers. Also related DroppedAttributeHeaders page.

Issue

Sometimes presenting relations within tables may involve more complex associations between various data cells and their header cells. Similarly, authors may need to add axes to tables beyond that provided by a tables two dimensions. These additional axes may be presented through styling such as background colors or foreground text color or other such visual cues. Axes, may also be presented aurally and tactilely in various ways. However, currently HTML5 tables do not allow authors to present such complex relations in table. Without these capabilities, authors may be forced to present the relationships across multiple tables or without tables at all which could make it more difficult for users to comprehend the data.

Research

Examples

Comparison Examples

Single Examples

Use Cases

Solutions

Create an algorithm for DOM methods related to compelex tables

This approach would call for the use of an algorithm that matched data cells with header cells based on the structure of the table and the position of header cells. TH elements appearing on the four sides of a TBODY element could automatically be associated with DE elements that intersected the TH element's axis. Multiple consecutive TH elements could all provide the headings/labels for the remaining data cells in the row or column (for a TH element at the top/bottom or left/right side of a table body respectively). This is similar to the HTML 4.01 basic algorithm (though the HTML 4.01 algorithm did not include bottom-side or right-side TH elements).

Advantages:

Disadvantages:

Provide a @scope attribute and an @axis attribute on TH and TD elements

For corner header cells (and other complexities), adding a @scope attribute can help provide additional information about a the application of a header cell to data cells. With the @scope attribute, the problem of an ambiguous corner header cell can be solved by indicating whether the heading cell applies to adjacent column heading cells or the adjacent row heading cells (or even the entire rowgroup or colgroup if that's the same set of data cells).

Advantages:

Disadvantages:

Provide a @headers attribute on TH and TD elements

WCAG 2 explains the id/headers technique this way:

"This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute."

Advantages:

Disadvantages:

Provide an @axis attribute on TH and TD elements

The @axis attribute permits more complex tables by extending the tables axes beyond the standard two-dimensions. Authors may define named axes within the namespace of the table. All data and header cells sharing the same name are on the same axis.

Advantages:

Disadvantages:

Liaison with CSS WG

Liaison with CSS WG to add pseudo-element selectors for AXES including axes created through standard vertical and horizontal TH and TD element associations

Advantages:

Disadvantages:

Advice From Accessibility Authorities

Related Blog Posts

Related E-mail: May 2007

Rationale for removing the summary and headers attributes from tables?

Re: <font> (was Support Existing Content)

Use of headers and summary attributes (was : <font> (was Support Existing Content)

Accessibility is for everyone (was : Use of headers and summary attributes )

Testing Accessibility Re: Accessibility is for everyone

Re: Complex Table Examples

headers attribute debate

[Fwd: RE: headers attribute debate]

Related E-mail: June 2007

Re: Complex Table Examples

Re: headers attribute (was Re: Form elements)

Re: headers attribute

Table accessibility (was Re: headers attribute)

Raising issues in a way that the editors will pay attention to them

Related E-mail: July, 2007

Tabular Data Review

Related E-mail: August, 2007

Issues surrounding Tables: backwards compatibility and complex tables

HEADERS, FOR whom - any ID?

Data Table Collections (Research)

table, DOM interfaces, cell, heading, leader, trailer, header, footer, runner, TABLE, CAPTION, COLGROUP, COL, THEAD, TFOOT, TR, part of my review of 3.15 Tabular data

HTML/ComplexTables (last edited 2007-10-30 09:58:42 by LauraCarlson)