CHAPTER 16 ■ TABLE COLUMN LAYOUT
fixed, or percentage. These different types of width combined with the type of table cause the browser to
use different algorithms for sizing columns.
A value of auto assigned to width creates an auto width. A measurement assigned to width, such as
pixels or ems, creates a fixed width. A percentage assigned to width, such as 50%, creates a percentage
width.
Finally, a browser examines the width assigned to all cells in the same column in all rows to
determine the column width and the type of column width. How a browser reconciles different cell
widths in the same column is explained in the Column Width design pattern. Also, assigning different
types of width to different columns causes the browser to use multiple layout algorithms in the same
table. How a browser combines column layouts is explained in the Mixed Column Layouts design
pattern.
Even though a browser examines the width of all cells in nonfixed tables to determine the column
width, you only need to assign a width to the cells in the first row.
The following design patterns are created by combining the four types of tables with the three types
of widths.Using Column Layouts
For many years, designers and developers have used the many automatic and powerful layout features
of columns to lay out nontabular content. In fact, this extensive use has promoted browser vendors to
enhance these capabilities more than any other feature. It has also caused the major browser vendors to
ensure column layouts work consistently and are bug-free.
Even though you can use column layouts to lay out nontabular data, I do not recommend it because
it leads to less-accessible content.
The purpose of this chapter is to show you how to lay out tabular data. Tabular data needs to be
styled and laid out. Each example in this chapter shows how you can automatically lay out columns
using the many powerful and automatic algorithms built into browsers.Chapter Outline
- Column Width shows how a browser calculates the column width when cells in
the same column in different rows have different widths, different types of widths,
different minimum content widths, and different maximum content widths. This
pattern applies to shrinkwrapped, sized, and stretched tables. - Shrinkwrapped Columns shows how to shrinkwrap columns to fit the width of
their content. This pattern applies to shrinkwrapped tables. - Sized Columns shows how to assign fixed widths to columns while keeping the
table’s width within a minimum or maximum value. This pattern applies to
shrinkwrapped or fixed tables. - Content-Proportioned Columns shows how to automatically distribute a table’s
width among its columns proportionally to the width of the content in each
column. Columns with wider content are assigned to a wider width than columns
with narrower content. This pattern applies to sized and stretched tables. It also
applies to shrinkwrapped tables when their content stretches them to the width of
their containers. - Size-Proportioned Columns shows how to automatically distribute a table’s
width among its columns proportionally to the width assigned to each column. In
this design pattern, a browser does not necessarily render a column at its assigned
width. Instead, it renders a column proportionally to the widths assigned to other
columns. This pattern applies to sized, stretched, and fixed tables. It also applies