HTML and CSS Reference
Figure1-4.Table layout components
Fixed Table Layout
The fixed-layout model is fast because its layout doesn't depend on the contents of table cells;
it's driven by the width values of the table, columns, and cells within the first row of the table.
The fixed-layout model uses the following simple steps:
1. Any column element whose width property has a value other than auto sets the width for
2. If a column has an auto width, but the cell in the first row of the table within that column
has a width other than auto , that cell sets the width for that column. If the cell spans mul-
tiple columns, the width is divided equally among the columns.
3. Any columns that are still auto-sized are sized so that their widths are as equal as possible.
At that point, the width of the table is set to be either the value of width for the table or the
sum of the column widths, whichever is greater. If the table turns out to be wider than the
column widths, the difference is divided by the number of columns and added to each of them.
Automatic Table Layout
The automatic-layout model, although not as fast as the fixed-layout, is likely to be much more
familiar to authors because it's substantially the same model that HTML tables have used for
years. In most current user agents, use of this model will be triggered by a table with a width
of auto , regardless of the value of table-layout —although this is not assured.
The details of the model can be expressed in the following steps: