About the Table Usability Concept

Is it new ?

No. The table usability concept is essentially based on common use. But from the web editor perpective this concept will change how to code a simple and complex HTML table.

Both following tables are the same, their only difference is the first one use the zebra stripping and the other one not.

I am sure you prefer the first table with the zebra stripping. Why ? Simply because you have the perception of the group summary (the row cell header "Total" at the end of the table). The table usability concept is about twelve small HTML technique for web editor/web developper. With the combinaison of all those technique, the user experience can be enhanced. This concept define of what can be a limit of an acceptable complex table. The following tables quickly show the concept of descriptive cell, key cell, layout cell and multiple row/column group summary. The second table is the same but without the zebra stripping.

With the zebra stripping

	Header	Header	Header	Header	Header	Header	Header	Header	Summary
Row Group Heading
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Summary			Data	Data	Data	Data	Data	Data
Row Group Heading
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Summary			Data	Data	Data	Data	Data	Data
Summary			Data	Data	Data	Data	Data	Data

Without the zebra stripping

	Header	Header	Header	Header	Header	Header	Header	Header	Summary
Row Group Heading
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Summary			Data	Data	Data	Data	Data	Data
Row Group Heading
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Key	Header	Description	Data	Data	Data	Data	Data	Data	Data
Summary			Data	Data	Data	Data	Data	Data
Summary			Data	Data	Data	Data	Data	Data

Technique related to this concept

Issued from the WET Toolbox 3.0

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

From the WCAG 2.0

• 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

More Resource

• Extended definition of HTML5 table elements
• HTML Table Validator (With ids/headers/aria-describedby auto assignation)

Zebra striping for tables

• Zebra striping - Column highlight table
• Zebra striping - Simple table
• Zebra striping - Simple grouping table
• Zebra striping - Invoice table
• Zebra striping - Row level with summary table

Case Studies

1. Case Studies #1
2. Nutrition Facts table
3. Ottawa Senators vs. Buffalo Sabres - Game ID # 270519002

Table Parser - Technical Documentation

The technical is on the "Table Usability Concept" github repository. If you found bug or have questions on how to use the parser and how to create complex table, please do not hesitate to submit an issue request.

• Standalone uncompressed version of the table parser
• How to access to the table parsed data
• Data Structure
  • table element
  • caption element
  • colgroup element
  • col element
  • thead element
  • tbody element
  • tfoot element
  • tr element
  • th element
  • td element

Question / Comment ?

You can contact me via twitter @duboi5p or by submiting an issue on the wet-boew github.