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 (
For those languages (such as XML) which don't have predefined table elements, authors must use the following values of the
Specifies a block-level table.
Specifies an inline table.
Specifies a table row.
The following properties apply to columns and column groups:
border-collapseis set to
collapseon the table.
It applies only if cells and rows have transparent backgrounds.
This property gives the minimum width to the column.
The only value that works is
collapse. In this case, no cell is rendered.
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.
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
appendChild() methods when applied to tables.