The CSS table resembles the HTML 4 table model and it consists of tables, captions, rows, row groups (row, header and footer groups), columns, column groups and cells.

By using display property the elements might be mapped to the table elements. Following values may be assigned to an arbitrary element:

  • table; specifies that the element defines a block-level table (table in HTML);
  • inline-table; specifies that the element defines an inline-level table (table in HTML);
  • table-row; specifies that the element is a row of cells (tr in HTML);
  • table-row-group; specifies that the element is a row group (tbody in HTML);
  • table-header-group; is equivalent to the table-row-group except that it refers to the table header (thead in HTML);
  • table-footer-group; is equivalent to the table-row-group except that it refers to the table footer (tfoot in HTML);
  • table-column; specifies that the element describes a column of cells (col in HTML);
  • table-column-group; specifies that the element is a column group (colgroup in HTML);
  • table-cell; specifies that the element is a table cell (td, th in HTML);
  • table-caption; specifies that the element is a table caption (caption in HTML).

Replaced elements such as images, that have display property set to one of these values, will participate in the table layout as is; i.e. an image mapped as table-cell will fill the cell space, and might participate towards the table sizing algorithms.

Elements set to table-column or table-column-group won't be rendered (same as display: none) but they might be useful, because they may have attributes that will apply certain styles to the columns.

Example of mapping algorithm:

table    { display: table }

tr       { display: table-row }

thead    { display: table-header-group }

tbody    { display: table-row-group }

tfoot    { display: table-footer-group }

col      { display: table-column }

colgroup { display: table-column-group }

td, th   { display: table-cell }

caption  { display: table-caption }

The basic styling for the tables uses the properties described in other chapters. The most used ones are: padding and borders, width and height, backgrounds, and text styling. In the following chapters, however, table visual models and table particular properties will be explained in greater details.

 

›› go to examples ››