Background Colors

Topics on This Page

bgcolor in the <table> Tag
bgcolor in the <tr> Tag
bgcolor in the <td> and <th> Tags
Browser Differences
Example

bgcolor in the <table> Tag

You can code a bgcolor attribute in the <table> tag. This specifies a background color for all of the cells in the table.

If you have a non-zero cellspacing value so that there are gaps between the cells, IE and Netscape handle things a bit differently. Netscape fills in the gaps using the page's background color, while IE uses the table's background color.

Here's an example of a table with a background color:

<table border="4" cellspacing="4" cellpadding="4" bgcolor="#ffffcc">
  <tr>
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td> $534.00 </td>
  </tr>
</table>

Here's how this looks in several browsers:

IE 5
Netscape 4
Netscape 6

bgcolor in the <tr> Tag

If you add bgcolor to the <tr> tag, all of the cells in that row receive that background color. This overrides the bgcolor in the <table> tag, if there is one.

<table border="4" cellspacing="4" cellpadding="4" bgcolor="#ffffcc">
  <tr bgcolor="#ccffff">
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td> $534.00 </td>
  </tr>
</table>

bgcolor in the <td> and <th> Tags

If you add bgcolor to a <td> or <th> tag to color an individual cell. This will override any colors specified in the <tr> tag for the row or for the <table> tag.

<table border="4" cellspacing="4" cellpadding="4" bgcolor="#ffffcc">
  <tr bgcolor="#ccffff">
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td bgcolor="#ffccff"> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td bgcolor="#ffccff"> $534.00 </td>
  </tr>
</table>

Browser Differences

Older browsers (before version 3) don't recognize bgcolor for tables. If you specify a background color for a table and choose a font color that goes well with that background, your text will not be readable in these older browsers unless the font color is also readable against the page's background color.

Remember to keep in mind that IE and Netscape fill in the cellspacing areas differently. Suppose you want a table with no border and in a solid color. If you don't specify cellspacing="0", Netscape will not color the areas between cells (remember that cellspacing defaults to "2"). Here's an example:

<table border="0" cellpadding="4" bgcolor="#ffffcc">
  <tr>
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td> $534.00 </td>
  </tr>
</table>

IE 5
Netscape 4

Add cellspacing="0" if you want a solid table with no gaps between the cells.

Example

Here's your chance to play with colors a bit. Try removing the bgcolor from the <table> and/or <tr> tags. Try adding a bgcolor to one of the <th> tags in the first row while leaving bgcolor in the <tr> tag.

Notice how the background colors for one of the cells is specified using CSS rather than bgcolor. Try using the CSS method in a <tr> tag and in the <table> tag. If both bgcolor and the CSS method is used in one of these, which one wins?

If you want to refer to my color chart, you can find it here (this link opens in a new window).

NOTE: If you're viewing this with Netscape 6, there appears to be a problem with displaying the table dynamically. Colors for individual cells appear correctly with both the bgcolor and CSS methods, but colors specified for <table> and <tr> do not. This only appears to happen in the dynamically-created page used here.