CSS tables: the CSS table model

The CSS table model is build upon the HTML 4.0 table model, where the structure of a table resembles its visual layout. This model is said to be a row supremacy model, because authors explicitly specify table rows in the source code. The CSS table model consists of tables (table), captions (caption), rows (tr), row groups (tbody), columns (col), column groups (colgroup) and cells (td, th).

For those languages (such as XML) which don't have predefined table elements, authors must use the following values of the display property:

• table

  Specifies a block-level table.

• inline-table

  Specifies an inline table.

• table-row

  Specifies a table row.

• table-row-group

  Just like tbody.

• table-header-group

  Just like thead.

• table-footer-group

  Just like tfoot.

• table-column

  Just like col.

• table-column-group

  Just like colgroup.

• table-cell

  Just like td/th.

• table-caption

  Just like caption.

Columns

The following properties apply to columns and column groups:

• border

  Only if border-collapse is set to collapse on the table.

• background

  It applies only if cells and rows have transparent backgrounds.

• width

  This property gives the minimum width to the column.

• visibility

  The only value that works is collapse. In this case, no cell is rendered.

Table algorithms

Through the table-layout property you can choose either a fixed or an automatic table layout algorithm. With the first, the table layout doesn't depend on the content of its single cells, but only on the overall width of the table, the overall width of the columns and the spacing between borders and cells. The width of the table can be specified via the width property. If you specify an auto value, it implies that you're actually using an automatic algorithm.

With the latter, instead, the width of the table is determined by the width of columns and borders. The CSS specifications allow browsers to use whatever other algorithm they want, even if the results may be different. In practice, however, the table width is determined by the amount of content it contains.

JavaScript manipulation

From a performance perspective, it's better to build a table using the innerHTML property, which is considerably faster than traditional DOM methods. Anyway, if you want to use a DOM approach, bear in mind that Internet Explorer 6 and 7 have significant problems with the createElement() and appendChild() methods when applied to tables.