HTML Tables and WET Table Parser

Tools

• HTML Table Validator (With ids/headers/aria-describedby auto assignation)

HTML Table Technique

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

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
• Zebra striping - Table Mouse Hover Effect
• Zebra striping - Table Mouse Hover Effect with Row Group

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

Other Resource

• About the Table Usability Concept
• Extended definition of HTML5 table elements