Layout

Appropriate uses for tables

Data grid

• Tabular data
• The natural use for tables

Vertically-centered content

• An arbitrary element that remains vertically-centered regardless of its height or the height of its parent
  
• This does not appear to be possible without the use of a table cell (or the use of JavaScript) (except, to a limited extent, for images)

Equal-height columns

• Side-by-side columns that are vertically flexible but remain equal in height
• The natural quality for table cells in a row

HTML email

• For email readers that don't support CSS-based layout
  

Flexible-width, flexible-height columns

• This only applies to table-cell content that's not nested within a block-level element
• For a fixed-width table, to shrink-wrap one or more of the columns, specify a width >= 1px for those columns,  and avoid specifying a width for at least one of the other columns (which will take up the excess space  for the table)
• Unless the columns have a fixed width or a fixed height, this does not appear to be possible without the use of a table (or the use of JavaScript)
  

Minimum height

• An arbitrary element that is vertically flexible but with a lower limit set for the height
• For a table cell, the specified height acts as a minimum height

• In IE6, without using a table or a 1xN image, this requires a CSS hack (* html ... {height:...;})
• IE6 does not support the minimum-height property, but it treats height like minimum-height.

Precise table layout

Min width

• Insert an n-by-1 invisible image

<img src="images/pixel-invis.gif" width="10" height="1" alt="" border="0">

Max default width

• Specify the width of the html element

<td width="10">...</td>

Min height

• Insert a 1-by-n invisible image

<img src="images/pixel-invis.gif" width="1" height="10" alt="" border="0">

Max default height

• Specify the height of the html element

<td height="10">...</td>

Usage

• When a precise width or height is needed, both the minimum and the maximum values must be specified

<td width="10"><img src="images/pixel-invis.gif" width="10" height="1" alt="" border="0"></td>

<td height="10"><img src="images/pixel-invis.gif" width="1" height="10" alt="" border="0"></td>

• Avoid specifying table height (pixels or percentage) for any table with very-short rows