Sizes

Browsers normally determine the width and height of each cell automatically, finding a balance between the available width for the entire table and the widths of the individual columns. Most browsers follow a recipe similar to the following:

1. Try to format each cell without introducing line breaks. If the resulting table fits between the margins of the table's parent, this will be the final layout.

2. If the table won't fit without adding line breaks in the cells' content, try first to make the table exactly as wide as the parent's margins allow. If the cells' content can be broken into lines so that the table fits, this will be the chosen layout.

3. If there is no possibility to make the table narrow enough to fit in the parent, make each column as narrow as possible, and let the table stick out on the right.

This usually results in a reasonable table, but seldom a beautiful one. If you want a certain column to take more space at the cost of another, or if you want several columns to be the same width, you have to set the width property of some cells or columns.

Setting the width property on a cell or column has a slightly different effect than on other elements. On normal elements, it sets the exact width; on table cells and columns, it sets the minimum width. If the content of a normal element is too wide for the specified value of width, the content sticks out and overlaps the border (see the overflow property in Chapter 8). But, if the content of a table cell is too wide for the given width, the width itself is increased, and that of all other cells in the column as well.

If different cells in the same column have different widths, the maximum width is used. The width of a cell that spans several columns imposes a minimum on the sum of the widths of the columns it spans.

If you set the width property on the TABLE element itself, that, also, acts as a minimum width: If the columns together require more than the specified width of the table, the table's width will be increased. On the other hand, if the specified width is larger than what the columns require, the columns are made wider. This is often used to make a table as wide as its parent (or wider):

 <STYLE>   TABLE {width: 100%; border-collapse: collapse}   TD {border: thin solid} </STYLE> ... <TABLE>   <TR><TD>This <TD>table <TD>needs   <TR><TD>only <TD>little <TD>space </TABLE> 

This is rendered as a full-width table:

This	table	needs
only	little	space

You can use percentages for the widths of cells or columns, and the browser tries to make that column as wide as specified. But because it is possible to create circular dependencies (the width of the columns is a percentage of the table's width, but the table's width depends on the columns), browsers may choose to handle only the most simple cases (for example, when the table's width is given explicitly and is larger than the minimum required width).

Be careful when using percentages because it is easy to forget the borders and padding. Setting the column widths of a four-column table to 25 percent only makes sense if the borders and padding are zero; otherwise, the sum of the widths will be more than 100 percent, which is obviously impossible. Here is an example with percentages:

 TABLE {border-collapse: separate; cell-spacing: 4%} TD {width: 20%} 

This works for a four-column table. The four columns and the five spacing areas add up to 100 percent. However, if you want your columns to be all the same width, the easier way is to use the fast size algorithm.

Fast Size

Name:	table-layout
Value:	auto | fixed
Initial:	auto
Applies to:	tables and inline tables
Inherited:	no
Percentages:	N/A

If the table is simple and sufficiently regular that you can set the size of each column explicitly and be sure that the sizes are wide enough, you can tell the browser to use your sizes directly without checking each cell's minimum requirements. The advantage is that the browser gains time. It can start formatting and displaying the first row, using the column widths that you gave in the style sheet, without waiting for the rest of the table.

Of course, any failures are the designer's responsibility. If a cell can't be made narrow enough to fit the preset width, results are undefined. Usually, some text ends up overlapping the text in the next cell.

The property that controls whether the browser uses the fast mode is table-layout. Not all browsers look at this property; some use the normal mode anyway, deeming it fast enough. Here is an example of a style sheet using the fast table algorithm. It creates a table with a preset width and all columns the same width:

 TABLE {table-layout: fixed: width: 100%} 

Two conditions must be met before the fast algorithm can be used: table-layout must be fixed, and width must not be auto, both on the table element. If these two properties are set as required on the table element, the widths of the columns are computed after the first row without waiting for the other rows. First, all the column elements are inspected (elements COL in HTML). If there are any with a width property other than auto, their columns are the indicated width. For the other columns, the width property of the cells in the first row is checked. If any width properties are not auto, their value will be used for the columns. If no columns are left without a width, the width of the table element is not used, and the width of the table is instead computed from the column widths, plus any paddings and borders. Otherwise, the columns that don't have a width yet will divide the remaining space.

That leads to three possible situations:

1. All columns have an explicit width, for example:

    TABLE {table-layout: fixed; width: 100%} COL {width: 4.5em} 

   
   

   If we apply this to our large "trip to the beach" table (shown previously), which has 11 columns, we get a table of 49.5em plus any borders and paddings. The width property of the TABLE is ignored (although it has to be set to something; if you set it to auto, the fast algorithm will not be used).

2. Only some columns have an explicit width, for example:

    TABLE {table-layout: fixed; width: 50em} COL.when, COL.who {width: 4em} 

   
   

   Applied to the same table, this makes the first two columns 4em wide, and the remaining columns equally divide the remaining space. Assuming three borders of 0.1em and padding for all cells of 0.3em, that leaves 42em 3 x 0.1em 22 x 0.3em = 35.1em for the remaining nine columns, or 3.9em for each column.

3. No columns have an explicit width, for example:

    TABLE {table-layout: fixed; width: 55em} 

   
   

   This makes all columns equally wide. You may not be interested in the exact width of the columns, but if you wish, it can be computed: Using the same example, the columns will be (55em 3 x 0.1em 22 x 0.3em)/11 = 48.1em/11 4.4em.