HTML and CSS Reference
In-Depth Information
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
that column.
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:
