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.


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.

Leave a Reply

Note: Only a member of this blog may post a comment.