Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Adding a Border

You can place a border around your table by using the BORDER attribute of the <TABLE> tag. BORDER is set to the number of pixels wide you want the border to be. A version of our real estate search table with a 4-pixel border is shown in Figure 6.6. The modified <TABLE> tag that accomplishes this effect is

<TABLE WIDTH=100% BORDER=4>

You can also set BORDER equal to zero. This means that no border will be used and the browser should give back any space it has reserved to put in a border. This is an especially good approach to use when you’re using a table to position page elements because it enables you to place the elements right up against one another without any one- or two-pixel gutters between them.

Spacing Within a Cell

The distance between the content of a cell and the boundaries of the cell is called cell padding. The CELLPADDING attribute of the <TABLE> tag enables you to control the amount of cell padding used in your tables. Typically, Web page authors increase the cell padding from its default value of 1 to put a little extra whitespace between the contents and the edges of a cell (compare the two tables shown in Figure 6.7). This gives the whole table a bit more room to breathe. The <TABLE> tags used to produce the tables in Figure 6.7 are

<TABLE WIDTH=100% BORDER=2 CELLPADDING=6>
...
</TABLE>
<TABLE WIDTH=100% BORDER=2 CELLPADDING=12>
...
</TABLE>

FIGURE 6.6  Table borders create a visual boundary between cells and frequently make your tables easier to read.

FIGURE 6.7  Increasing cell padding makes your tables appear less cluttered.

Spacing Between Cells

You also have control over the amount of space between cells. By increasing the value of the CELLSPACING attribute of the <TABLE> tag, you can open up a table even further (see Figure 6.8). Notice that the size of the border used between the cells increases as you increase the cell spacing. The <TABLE> tag used in Figure 6.8 is

<TABLE WIDTH=100% BORDER=2 CELLSPACING=8>

FIGURE 6.8  Increasing the amount of space between cells can give the illusion of your border being thicker than it really is.

Spanning Multiple Rows or Columns

By default, a cell occupies or spans one row and one column. For most tables, this is sufficient. When you start to use tables for layout purposes, though, you’ll encounter instances where you want a cell to span more than one row or column. HTML 4.0 supports attributes of the <TH> and <TD> tags that permit this effect.

Using the COLSPAN Attribute

The COLSPAN attribute inside of a <TH> or <TD> tag instructs the browser to make the cell defined by the tag take up more than one column. You set COLSPAN equal to the number of columns the cell is to occupy.

COLSPAN is useful when one row of the table is forcing the table to be a certain number of columns wide, and the content in other rows can be accommodated in a smaller number of columns. Figure 6.9 shows a table that makes good use of the COLSPAN attribute. In the figure, the author used the COLSPAN attribute to get the page header (navigation links, sidewalk.com logo, and the date) to occupy three columns of the table.

FIGURE 6.9  Forcing a cell to occupy more than one column is helpful in creating more readable page layouts.

Using the ROWSPAN Attribute

ROWSPAN works in much the same way as COLSPAN, except that it enables a cell to take up more than one row. Figure 6.10 shows the international links sections of the Netscape NetCenter page. The “Professional Connections” link is in a single cell that spans eight rows (ROWSPAN=8) of the table. The HTML code to place the link might look like

<TABLE>
<TR>
<TD> ... contents of first cell ... </TD>
<TD> ... contents of second cell ... </TD>
<TD ROWSPAN=8><A HREF=“prfcon.html”>Professional Connections ...</A></TD>
</TR>
...
</TABLE>

What Elements Can Be Placed in a Table Cell?

HTML tables were developed with the intent of presenting columns of information, but that information does not necessarily have to be text based. You can place many types of page elements in a given table cell:

•  Text—Text is the most obvious thing to put in a table cell, but don’t forget that you can format the text with physical and logical styles, heading styles, list formatting, line and paragraph breaks, and hypertext anchor formatting.

FIGURE 6.10  Table elements can occupy more than one row of the table when you use the ROWSPAN attribute.

•  Images—You can place an image in a table cell by enclosing an <IMG> tag between the <TD> and </TD> tags that define the cell. This is useful for designing page layout with tables because you aren’t constrained only to text.

•  Blank space—Sometimes it’s useful to put a blank cell in a table. You can accomplish this by putting nothing between the cell’s defining tags (<TD></TD>) or by placing a nonbreaking space between the tags (<TD>&nbsp;</TD>). Use of the nonbreaking space is preferable because, if you have borders turned on, a cell with a nonbreaking space picks up a border, but a cell created with <TD></TD> may not.

•  Form fields—The ability to place form fields inside of a table cell is very important, especially when you consider that the prompting text in front of form fields are of varying lengths. By putting prompting text and form fields in a table, you can align them all and make the form much more readable.

•  Other tables—You can embed one table inside of another, although this can induce quite a headache for many people! Previously, only Netscape Navigator and Microsoft Internet Explorer supported tables within tables; but now that it is part of the HTML 4.0 standard, other browsers should support it as they come into compliance with the new standard.

	If you plan to embed a table within a table, it’s helpful to do a pencil-and-paper sketch first. The sketch should help you code the tables more efficiently.