CHAPTER 16 ■ TABLE COLUMN LAYOUT
to shrinkwrapped tables when assigned cell widths stretch them to the width of
their containers.
- Percentage-Proportioned Columns shows how to distribute a table’s width
among its columns proportionally to the percentage assigned to the width of each
column. In this design pattern, a browser does not necessarily render a column at
its assigned percentage of the table’s width. Instead, it renders a column
proportionally to the percentages assigned to other columns. This pattern applies
to sized, stretched, and fixed tables.
- Inverse-Proportioned Columns shows how to size columns in proportion to
their content. For example, a cell can be sized to be double the width of its
content. This pattern applies to shrinkwrapped tables.
- Equal Content-Sized Columns shows how to automatically shrink a table to its
smallest possible width while sizing all columns equally. In other words, it sets all
columns to the same width while using the smallest possible width that will
display each cell’s content. It creates compact tables with uniform columns. It
works best with tables containing numbers and short text. This pattern applies to
shrinkwrapped tables.
- Equal-Sized Columns shows how to automatically divide a table’s width into
equal proportions for each cell. This pattern applies to sized, stretched, and fixed
tables.
- Undersized Columns shows how to create columns that are narrower than their
content. This pattern applies to fixed tables.
- Flex Columns shows how to create dynamically sized columns alongside fixed-
width or percentage-width columns. These columns fill in the space not taken by
sized or percentage cells. As a table’s container grows or shrinks, so do flex
columns. This pattern is most useful when applied to stretched and fixed tables,
but also applies to sized tables.
- Mixed Column Layouts shows how to combine fixed-width, percentage-width,
and auto-width columns to create additional layouts. It shows how browsers
assign different priorities to fixed-width, percentage-width, and auto-width
columns depending on whether a table is shrinkwrapped, sized, stretched, or
fixed.
