Extended definition of HTML5 table elements

A knowledge about how to design a table in a HTML format would help to understand this documentation. The Table Usability Concept assume that you already know the definition from the W3C related to table elements defined in the HTML5 specification.

Here a quick view about the definition of each table related element:

  • table: The table element represents data with more than one dimension, in the form of a table. [...] Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap. [...] Authors are encouraged to provide information describing how to interpret complex tables.
  • caption: The caption element represents the title of the table that is its parent, if it has a parent and that is a table element. [..] A caption can introduce context for a table, making it significantly easier to understand.
  • colgroup: The colgroup element represents a group of one or more columns in the table that is its parent, if it has a parent and that is a table element.
  • col: If a col element has a parent and that is a colgroup element that itself has a parent that is a table element, then the col element represents one or more columns in the column group represented by that colgroup.
  • thead: The thead element represents the block of rows that consist of the column labels (headers) for the parent table element, if the thead element has a parent and it is a table. [...] Notice the use of both th and td elements in the thead element: the first row is the headers, and the second row is an explanation of how to fill in the table.
  • tbody: The tbody element represents a block of rows that consist of a body of data for the parent table element, if the tbody element has a parent and it is a table.
  • tfoot: The tfoot element represents the block of rows that consist of the column summaries (footers) for the parent table element, if the tfoot element has a parent and it is a table.
  • tr: The tr element represents a row of cells in a table.
  • th: The th element represents a header cell in a table.
  • td: The td element represents a data cell in a table.

Information was token from the HTML5 specification, Editor's Draft 26 June 2012, Revision 1.5697

A basic knowledge about the HTML table processing model help on how to use the colspan and rowspan attribute on a cell in regards of the group element. The table usability concep should not conflic with the specification to forming relationships between data cells and header cells if the WCAG technique H43: Using id and headers attributes to associate data cells with header cells in data tables is used.

The Table Usability define a new concept on how to create the relationship between the informative elements versus the tables structure elements. That is accomplished by following the HTML5 specification on how the HTML elements is nested. The Table Usability Concept are supported by a Javascript Parser build with the jQuery framework.

Element Type

  • Informative: The informative element is related to the visual look of the table. In the HTML the table informative element are: caption, th, td
  • Structural: A structural element is used to classify and give a particular sementic to the informative element and their styling would affect the informative element associated to them. In the HTML the table structural element are: table, colgroup, col, thead, tbody, tfoot, tr.

Element Classification

The Informative and Structural element are classified in forth category

  • Matrix: The matrix is the global container for a givin table. The matrix have a reference to all the group, all the vector and all the cell. The table HTML element is used to represent the matrix.
  • Group: A group is a data-set or a header-set inside a table. A group is normally represented by a cell header (th). The colgroup, thead, tbody, tfoot is used to represent each group. Here, the grouping concept is related but not directly associated to the visual representation of the data inside the table. Special note regarding the attribute scope: With this concept of element grouping, I recommend to do not set the scope attribute because a summary row group may don't have a representive header and this create inconsistancy in the table structure.
  • Vector: A vector is the linear representation of the table as per his column and row. The col and row is used to represent a vector.
  • Cell: A cell is a visual element in a table. The caption, th and td is used to represent a cell.

Element Category

The category is use to give a particular sementic to a classified element.

  • Header: Basicly used to represent a header cell (th) and a header row group (thead), this concept is applied to the Group, Vector and Cell classification.
  • Data: Basicly used to represent a data cell (td), this concept is applied to the Group, Vector and Cell
  • Summary: Always preceded by a "Data", the summary category is determined on how the group and the cell is defined in a table. The tfoot element belong in the summary category.
  • Key: Similar to a primary key in a relational database, the key cell can only be defined for a row (Vector). The header cell associated is alway next to the key cell. Generally the key is not to intended to provide actual data but to provide a faster access to the data or to give a unique name for a cell header as reference. It's important that the key cell have the same width and height of his assoicated cell header.
  • Description: Used to provide additional information for a cell header. The description are not part of the actual tabular data. The description help to understand the cell header and/or provide additional information about the Vector. For a row (Vector), the cell description is next to the cell header for witch is providing a description. For a column (Vector), the cell description is directly bellow the cell header in the next row. It's important that the cell description have the same width and height of his assoicated cell header.
  • Layout: Only applicable to a cell, a layout cell don't provide any information. His location can only be at the intersection of two header group or at the insection of two summary group. His width and height need to correspond to the group intersection. Also to be considerated as a layout cell, the element th, td identified at the intersection need to be an empty tag.

Combinaison of Element Classification with the Element Category

  • Header Group: Represent a set of heading. In a row perpective this are represented by the thead element. In a column perpective this are represented by the first colgroup element. The key and the description is defined in the header group.
  • Data Group: Represent a data set. In a row perpective this are represented by the tbody element. In a column perpective this are represented by the first colgroup element if no column header group, Or by the second colgroup if a column header group exist. A table always have at least one data group for the column and one data group for the row. A Data Group can be represented by a group header cell.
  • Summary Group: Often smaller than his associated data group, the summary group include all the vector that show information like sub-total, total. The summary group share with his associated data group the same group header cell. However, it's possible, for a summary to do not share a group header cell with a data group. In this particular case the summary is set at the level 0 and no other group is allowed after.
  • Header Vector: A row or a column that is last cell is a header cell.
  • Data Vector: A row or a column that is last cell is a data cell. The only exception is a vector contained inside a header group, that define the concept of the key and description cell.
  • Summary Vector: Similar to a data vector but defined inside a summary group.
  • Key Vector: Only defined inside a column header group, the key vector is simply the column of key cell.
  • Description Vector: Only defined inside a header group, the description vector represent the column or/and the row that is used to describe a cell header.
  • Header Cell: Represent a group or a vector. The table caption and th element is considerated to be header cell.
  • Group Header Cell: Derivated from a header cell, a group header cell represent a data group or a combinaison of a data group with a summary group. The table caption is considerated to be a group header cell.
  • Data Cell: Defined inside a data group and represented by the td element.
  • Summary Cell: Defined inside a summary group and represented by the td element.
  • Key Cell: His relation is defined by the column header group. Similar to a primary key in a relational database, the key cell can only be defined for a row (Vector). The header cell associated is alway next to the key cell. Generally the key is not to intended to provide actual data but to provide a faster access to the data or to give a unique name for a cell header as reference. It's important that the key cell have the same width and height of his assoicated cell header.
  • Description Cell: His relation is defined by the header group. Used to provide additional information for a cell header. The description category is not a data but help to understand the cell header and/or provide additional information about the Vector. For a row (Vector), the cell description is next to the cell header that his providing a description. For a column (Vector), the cell description is directly bellow the cell header in the next row. It's important that the cell description have the same width and height of his assoicated cell header.
  • Layout Cell: A layout cell don't provide any information. A layout cell need to be empty tag without any spaces inside. His location can only be at the intersection of the header group or at the insection of summary group. His width and height need to correspond to the group intersection. The layout cell can be a th or a td element.