Pro HTML5 and CSS3 Design Patterns

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 ...