Tables elements Tables

Purpose and how to classify tables elements. As presented at the Web Experience Toolkit Codefest 4.

Classification

Base

  • table
  • caption
  • tr

Cells

  • th
  • td

Row grouping

  • thead
  • tbody
  • tfoot

Column grouping

  • colgroup
  • col

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 [span]
  • col [span]
  • thead
  • tbody
  • tfoot
  • tr

Informative

The informative element is related to the visual look of the table. In the HTML the table informative element are:

  • caption
  • th [colspan, rowspan, headers, scope, abbr]
  • td [colspan, rowspan, headers]

Cells functions (th, td)

Keep in mind

An empty cell <td></td> is not the same as including an space character <td>&nbsp;</td>

Layout
Use for presentation (Empty cell, layout table).
Header
Define a series of cells (th).
Data
Pieces of information.
Description
Provide additional information to support a header.
Offset
Data cell that is located prior the header.
Summary
Data cells that summaries other data cells.

Attribute

Attribute Used with Purpose Syntax
colspan <th>, <td> Number of columns that the cell is to span <th colspan="4">
rowspan <th>, <td> Number of rows that the cell is to span <th rowspan="3">
scope <th> Specifies which cells the header applies to <th scope="col">
id <th> Cell unique identifier <th id="h2">
headers <th>, <td> List of cell ids used are headers for a cell <td headers="h1 h2">
abbr <th> Alternative label can be used by user agents when listing the headers cells (th) <th abbr="Make">Toy manufacturer<th>
border <table> Draw a line around cell <table border="1">

Additional attribute in HTML5.1: sortable on <table> elements means to enables a sorting interface for the table. And sorted on <th> elements means column sort direction and ordinality.

Date modified: