Table and Cell Color and Alignment

After you have your basic table layout with rows, headings, and data, you can start refining how that table looks. You can refine tables in a couple of ways. One way is to add color to borders and cells.

Changing Table and Cell Background Colors

There are two ways to change the background color of a table, a row, or a cell inside a row. In the pre-CSS world, you would use the bgcolor attribute of the <table>, <tr>, <th>, or <td> elements. Just as in the <body> tag, the value of bgcolor is a color specified as a hexadecimal triplet or, one of the 16 color names: Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, or Silver. In the style sheet world, you use the background-color property. You can use the style attribute in the <table>, <tr>, <th>, and <td> elements, just as you can in most other elements. Each background color overrides the background color of its enclosing element. For example, a table background overrides the page background, a row background overrides the table's, and any cell colors override all other colors. If you nest tables inside cells, that nested table has the background color of the cell that encloses it.

Also, if you change the color of a cell, don't forget to change the color of the text inside it so that you can still read it. If you want your pages to be compatible with antiquated browsers, use <font color...>. For browsers that support Cascading Style Sheets, use the CSS color property.

Note

For table cells to show up with background colors, they must not be empty. Simply putting a <br /> element in empty cells works fine.

Here's an example of changing the background and cell colors in a table. I've created a checkerboard using an HTML table. The table itself is white, with alternating cells in black. The checkers (here, red and black circles) are images. In the source code, I've used both bgcolor and the background-color property to set background colors for some of the cells. As you'll see in the screenshot, the appearance of both is the same when rendered in the browser.

White Space and Tables

Speaking of using images in tables, generally it doesn't matter in the final output where white space appears in your original HTML code. In Netscape, however, there's one exception to the rule, and it applies when you're placing images in table cells. Suppose that you've formatted your code with the <img> tag on a separate line, like the following:

<td>   <img src="/books/2/631/1/html/2/check.gif"> </td>

With this code, the return between the <td> tag and the <img> tag is significantyour image won't be placed properly within the cell (this shows up in centered cells particularly). To correct the problem, just put the </td> and the <img> on the same line like this:

<td><img src="/books/2/631/1/html/2/check.gif"></td>

I've applied the rule mentioned in the "White Space and Tables" sidebar in the following example:

Input

<html> <head> <title>Checkerboard</title> </head> <body> <table bgcolor="#FFFFFF" width="50%" summary="checkerboard">   <tr align="center">     <td bgcolor="#000000" width="33%"><img src="/books/2/631/1/html/2/redcircle.gif" /></td>     <td width="33%"><img src="/books/2/631/1/html/2/redcircle.gif" alt="" /></td>     <td bgcolor="#000000" width="33%"><img src="/books/2/631/1/html/2/redcircle.gif" /></td>   </tr>   <tr align="center">     <td><img src="/books/2/631/1/html/2/blackcircle.gif" alt="" /></td>     <td style="background-color: #000000"><br /></td>     <td><img src="/books/2/631/1/html/2/blackcircle.gif" alt="" /></td>   </tr>   <tr align="center">     <td bgcolor="#000000"><br /></td>     <td><img src="/books/2/631/1/html/2/blackcircle.gif" alt="" /></td>     <td bgcolor="#000000"><br /></td>   </tr> </table> </body> </html>

The result is shown in Figure 8.14.

Output

Figure 8.14. Table cell colors.

Changing Border Colors

Internet Explorer also enables you to change the colors of the table's border elements by using the bordercolor, bordercolorlight, and bordercolordark attributes. Each of these attributes takes either a color number or name and can be used in <table>, <td>, or <th>. Like background colors, the border colors each override the colors of the enclosing element. All three require the enclosing <table> tag to have the border attribute set.

Currently, these extensions are only supported in Internet Explorer, with the exception of bordercolor, which is supported in Netscape. All of these have been deprecated in favor of style sheets.

bordercolor sets the color of the border, overriding the 3D look of the default border.
bordercolordark sets the dark component of 3D-look borders and places the dark color on the right and bottom sides of the table border.
bordercolorlight sets the light component of 3D-look borders and places the light color on the left and top sides of the table border.

Figure 8.15 shows an example of the table with a border of 10 pixels. To demonstrate the Internet Explorer attributes, bordercolordark and bordercolorlight have been added to give the thicker border a 3D look. The first line of the code has been changed as follows:

<table border="10" bordercolorlight="Red" bordercolordark="Black" bgcolor="#ffffff" width="50%">

This line of code is getting a little long, isn't it? You might find it easier to read if you put each attribute on a separate line, as the following example shows. It still works the same. Just remember that the closing bracket (>) must appear only after the final attribute: