A Complete Guide to Web Design

184 Chapter 10 – Tables

Affecting Table Appearance

Web Design in a Nutshell, eMatter Edition

Cell Settings

Alignment attributes within a cell (<td>or<th>) apply to the current cell.

Cell settings will override row settings. Furthermore, alignment settings within

the contents of the cell (e.g.,<p align=right>) take precedence over both

cell and row settings.

Horizontal alignment is specified with thealignattribute, which takes the stan-

dardleft,right,orcentervalues. These values work the same as regular

paragraph alignment.

Vertical alignment is controlled using thevalignattribute, which can be set to

top,middle(the default),bottom,orbaseline(“first text line appears on a

baseline common to all the cells in the row”).

By default, the text in a cell will automatically wrap to fill the allotted space. To

keep text on one line (unless broken by a<br>or<p>), use thenowrapattribute

within the table cell (<td>or<th>). This should be done with caution because

the text in the cell may render larger for some users and will run out of room in

the table cell.

Sizing Tables

You can control the size of the entire table as well as the size of rows and

columns. By default, a table (and its rows and columns) will be sized automati-

cally to the minimum dimensions required to fit their contents. In many cases, it is

desirable to assign a table or column a specific size (especially when using the

table to build a page structure).

If the contents require a width greater than the specified size, the table will gener-

ally resize to accommodate the contents. Size specifications are treated as

suggestions that will be followed as long as they don’t conflict with other display

directions. In effect, by specifying the size of a table you are merely specifying the

minimum size.

Table sizes can be unpredictable even when specified, because they vary from

browser to browser. For instance, Netscape 3.0 will preserve the specified width of

the cell even if its contents are wider, resulting in items hanging outside the table

or into neighboring cells. It is best to specify ample room to accommodate the

contents of the cells.

Table dimensions

Thewidthattribute is used within the <table> tag to specify the width of the

table. You can specify an absolute value (measured in pixels) or a relative value (a

percentage of the available width of the screen) as shown in the following table:

To make a table fill the browser width, set the width to 100%.

Style Sample HTML Result

Absolute value <TABLE WIDTH=600> Makes the table 600 pixels wide

Relative value <TABLE WIDTH=80%> Makes the table 80% of the screen

width