Pro HTML5 and CSS3 Design Patterns

CHAPTER 16 ■ TABLE COLUMN LAYOUT

Equal-Sized Columns

Problem You want to automatically divide a table’s width into equal proportions for each cell. In
other words, you want to size all columns equally as a percentage of a table’s width.

Solution You can size columns equally as a percentage of a table’s width by applying
width:VALUE_OR_PERCENT to the table and width:PERCENT to its cells. In other words, you
size or stretch the table and assign percentages to cells. The table can be fixed layout or auto
layout. The key is to apply the same percentage to all cells.
The same percentages that work for the Equal Content-Sized Columns design pattern work
for this design pattern:
A two-column table requires each column to be sized at 50%.
A three-column table requires each column to be sized at 33.5%.
A four-column table requires each column to be sized at 25%.
A five-column table requires each column to be sized at 20%.
A six-column table requires each column to be sized at 16.5%.
A seven-column table requires each column to be sized at 14.1%.
An eight-column table requires each column to be sized at 12.3%.
A nine-column table requires each column to be sized at 11%.
A ten-column table requires each column to be sized at 10%.
Note that some percentages are not exact inverses of the number of columns because the
inexact value works better in some browsers. It does not matter if the total percentage
exceeds 100%, because a browser compensates by proportionately shrinking the width of all
columns to fit into its width.
The difference between this design pattern and the Equal Content-Sized Columns design
pattern is that this pattern divides columns equally into the table’s width, and the Equal
Content-Sized Columns pattern shrinkwraps columns to create the narrowest possible table
with equal-width columns.

Pattern^

HTML

CSS TABLE_SELECTOR { width:VALUE_OR_PERCENT; }^
CELL_SELECTOR { width:PERCENT; }

Location This pattern applies to sized, stretched, and fixed tables.

Advantages Equal-sized columns are most common in stretched and sized tables where you want
multiple tables to have a uniform width and you want their columns to have a uniform
width.

Disadvantages Sized tables do not adapt to small displays, such as mobile devices.

Tips Fixed tables automatically create equal-sized columns by default because assigning
width:auto to cells triggers this unique behavior of fixed tables.

Related to Equal Content-Sized Columns, Percentage-Proportioned Columns