Affecting Table Appearance 185
Tables
Affecting Table Appearance
Web Design in a Nutshell, eMatter Edition
Table height can be specified using theheightattribute, which can also be
defined by absolute or relative values. By default, the table will end after the
longest column of data, but you can force it to be longer or to always fill the
screen (height=100%).
Cell dimensions
Similarly, you can use thewidthandheightattributes within a cell tag (
or
| ) to specify the dimensions of that cell. A cell’s width setting will affect the
width of the entire column it occupies, therefore, column widths can be specified
by setting the width of just one cell in the column (generally those in the top
row); the remaining cells will follow.
Likewise, the cell’s height may determine the height of all the cells in that row, so
row height can be set using just one cell in each row.
Height and width values can be absolute measurements in pixels, or percentages
relative to the dimensions of the table.
Table Cell Spacing
There are two types of space that can be added in and around table cells: cell
padding and cell spacing. Thecellpaddingandcellspacingattributes are used
within the tag and apply to the whole table.
cellspacing
Cell spacing, which is controlled by thecellspacingattribute within the
tag, refers to the space between the cells (see the left image in
Figure 10-8). Values are specified in number of pixels. Increasing the cell
spacing results in wider shaded borders between cells. In the left image in
Figure 10-8, the gray areas indicate the 10 pixels of cell spacing added
between cells. The default value forcellspacingis 2, therefore, if nocell-
spacingis specified, browsers will automatically place 2 pixels of space
between cells.
cellpadding
Cell padding refers to the amount of space between the cell’s border and its
contents (as indicated in the right image in Figure 10-8). It is specified using
thecellpaddingattribute within the tag. Values are specified in
number of pixels; the default value is 1. Relative values (percentages of avail-
able space) may also be used.
Figure 10-8: Cell spacing versus cell padding
<TABLE CELLSPACING=10
CELLPADDING=1>
CELL 1 CELL 2
CELL 3CELL 4
CELL 1 CELL 2
CELL 3CELL 4
<TABLE CELLSPACING=1
CELLPADDING=10>
| 