A Complete Guide to Web Design

Basic Table Structure 179

Tables

Basic Table Structure

Web Design in a Nutshell, eMatter Edition

Row level controls

For each row (using attributes within the tag), you can control only:

• the vertical and horizontal alignment of the cells’ contents


• backround colors for all the cells contained in that row

Row settings override table-level settings. Note that table row tags are merely
containers for cell tags and contain no actual data themselves.

Cell level controls

Much of a table’s structure and appearance is controlled at the individual cell level
using or attributes. Within cells, you can control:

• the vertical and horizontal alignment of the cell’s contents


• the color of the cell background


• the height and width of the cell (and the row and column that contain it)


• whether the cell should span over more than one cell space in the table grid

Alignment and color specifications at the cell level will override settings made at
the row and table level.

Spanning Rows and Columns

Cells in a table can occupy the space of more than one cell in a row or column.
This behavior is set within theortags using thecolspanandrowspan
attributes.

Column span

In Figure 10-2,tells the browser to make “cell 1” occupy the
same horizontal space as two cells. The resulting spanned cell is indicated in the
figure on the left. Note that the row containing the spanned cell now only has one
set oftags instead of two.

Setting the colspan to a number greater than the actual number of columns (such
as "colspan=4" in the following example) may cause some browsers to add empty
columns to the table, possibly throwing your elements out of alignment. For
example, in Netscape 4.5 and earlier, additional collapsed columns appear as an
extra-wide border on the right of the table. The HTML 4.0 Specification requests
that empty cells not be added.

Figure 10-2: The colspan attribute spans cells horizontally.

<TABLE>

<TR> <TD COLSPAN=2> </TD> </TR>

<TR> <TD> </TD> <TD> </TD> </TR>

</TABLE>

<TABLE>

<TR>

<TD COLSPAN=2>cell 1</TD>

</TR>

<TR>

<TD>cell 3</TD><TD>cell 4</TD>

</TR>

</TABLE>