Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Backgrounds and Spacing

There are a few tricks in Figures 15.3 and 15.4 that I haven't mentioned yet. You can give an entire table—and each individual row or cell in a table—its own background, distinct from any background you might use on the Web page itself. You do this by placing a bgcolor or background attribute in the <table>, <tr>, <td>, or <th> tag exactly as you would in the <body> tag (see Hour 11, "Custom Backgrounds and Colors" ). To give an entire table a yellow background, for example, you would use <table bgcolor="yellow"> or the equivalent <table bgcolor="#ffff00">

Note

Only users of Netscape Navigator and Microsoft Internet Explorer version 3 or later will see table background colors. Table background images are supported by Microsoft Internet Explorer versions 3 and 4 and Netscape Navigator version 4 only.

You can also control the space around the borders of a table with the cellpadding and cellspacing attributes. The cellspacing attribute sets the amount of space (in pixels) between table borders and between table cells themselves. The cellpadding attribute sets the amount of space around the edges of information in the cells. Setting the cellpadding value to 0 causes all the information in the table to align as closely as possible to the table borders, possibly even touching the borders. cellpadding and cellspacing give you good overall control of the table's appearance.

You saw the effect of background color and spacing attributes in Figures 15.3 and 15.4.

TIP

You can place an entire table within a table cell, and that separate table can possess any and all the qualities of any table you might want to create. In other words, you can nest tables inside one another.

Nested tables open a vast universe of possibilities for creative Web page layout. For example, if you wanted a column of text to appear to the left of a table, you could create a two-column table with the text in one column and the subtable in the other column, like the following:

<table>
<tr><td>To the right, you see all our telephone numbers.</td>
<td>
  <table border="1">
  <tr><td>voice<td>802-888-2828</td></tr>
  <tr><td>fax  <td>802-888-6634</td></tr>
  <tr><td>data <td>802-888-3009</td></tr>
  </table>
</table>

Notice that the inner table has borders, but the outer table does not.

CAUTION

Before you get too excited about the preceding tip, you should know that Netscape Navigator 4 contains a bug that often prevents nested tables from displaying properly. There are an awful lot of people using Navigator 4, so it's a good idea to avoid putting tables within tables even though most other browsers (including Navigator 3 and 5) handle nested tables just fine.

Share ThisShare This

Informit Network