C H A P T E R 16
Table Column Layout
Browsers have many built-in capabilities for automatically sizing columns in tables. This chapter shows
how to harness these automatic features to shrinkwrap columns, size them to specific widths, size them
proportionally to each other, size them proportionally to their content, size them equally, size them
flexibly, and undersize or oversize them.
Table Layout Models
There are four types of tables: shrinkwrapped, sized, stretched, and fixed. Each type of table has unique
column layouts that only it can create.
The main purpose of a shrinkwrapped table is shrinking columns to fit their content. The main
purpose of a sized or stretched table is proportionally dividing its width among its columns. The main
purpose of a fixed table is setting its columns to fixed widths and speeding the rendering of the table.
Shrinkwrapped tables shrink to fit their content. This gives them the unique capability to shrink
columns to fit the width of their content. A shrinkwrapped table can be narrower than its container and
will not expand beyond the width of its container. Shrinkwrapped tables are the best choice when you
want flexible layouts that adapt to different devices, screen resolutions, and viewport sizes. The
following unique layouts apply to shrinkwrapped tables: Shrinkwrapped Columns, Sized Columns,
Equal Content-Sized Columns, and Inverse-Proportioned Columns.
Sized and stretched tables divide their width proportionally among their columns while ensuring
no column is narrower than its content. Sized and stretched tables work exactly the same when laying
out columns. The only difference is that a sized table can be narrower or wider than its container, and a
stretched table stretches to the width of its container. The following layouts apply to stretched tables:
Content-Proportioned Columns, Size-Proportioned Columns, Percentage-Proportioned Columns,
Equal-Sized Columns, and Flex Columns.
Fixed tables are a variation of sized or stretched tables. They can be sized or stretched, but not
shrinkwrapped. They are different from sized and stretched tables in that they ignore the width of their
content when laying out columns. This prevents a cell’s content from having any influence over a
column’s width. Because fixed tables ignore content, they render much faster than the other types of
tables. For shrinkwrapped, sized, and stretched tables, a browser must wait for the entire table to
download so it can calculate the minimum and maximum width of the content in each cell before it can
even begin rendering the table. Fixed tables can be rendered progressively as soon as the first row
downloads. Fixed tables can size columns smaller than their content and wider than the table width.
Fixed tables have unique support for Sized Columns and Undersized Columns. Fixed tables support all
the layouts of sized and stretched tables except for Content-Proportioned Columns. These layouts
include Size-Proportioned Columns, Percentage-Proportioned Columns, Equal-Sized Columns, and Flex
Columns.
The type of layout algorithm chosen by the browser depends on the type of table and on the type of
width assigned to its cells. In other words, it makes a big difference whether you assign a value of auto,
100px, or 20% to a cell. Not only are these different widths, but they are also different types of width: auto,