Bgcolor

Let's talk about bgcolor (background color) in tables a bit.

First, the bgcolor attribute is optional. Only use it where you want it.

Heirarchy (order of precedence) of bgcolor

  1. If you use no bgcolor at all, everything in your table will have the same bgcolor as your page or sig.
  2. Bgcolor color in a table tag overides the page or sig bgcolor. This bgcolor also sets the color that you see in cellspacing around cells.
  3. Bgcolor in a row sets the bgcolor for all cells in that row and overides table or page bgcolor.
  4. Bgcolor in a cell overides any other bgcolor.

In other words, bgcolor at the innermost level takes precedence over bgcolor set at any higher level, but enough talk - let's see this in action.

Here's my table from our last discussion with a smaller border. It uses
<table bgcolor="#9999ff">.


But now I want to change my table bgcolor while keeping the light blue in my cells. The obvious thing is to use bgcolor in the cells, like so.

<table bgcolor="#ffffff">
<tr>
<td bgcolor="#9999ff"> image </td>
<td bgcolor="#9999ff"> image </td>
<td bgcolor="#9999ff"> image </td>
</tr>
</table>

But since I have the same bgcolor in all of my cells, I can set it in the <tr> tag, like so:

<table bgcolor="#ffffff">
<tr bgcolor="#9999ff">
<td> image </td>
<td> image </td>
<td> image </td>
</tr>
</table>

The result is the same. Notice that cellspacing bgcolor (around the cells) is set in the table tag.

Now I want to use a different bgcolor in each cell. I'll use right, white and blue for a patriotic look. Since the table bgcolor is white, I don't need to set bgcolor in the white cell.

<table bgcolor="#ffffff">
<tr>
<td bgcolor="#ff6666"> image </td>
<td> image </td>
<td bgcolor="#9999ff"> image </td>
</tr>
</table>

Finally, just for fun, and because I can, I'll make a table with 3 rows, each with a different bgcolor.

<table bgcolor="#ffffff">
<tr bgcolor="#ff6666"> cell </tr>
<tr> cell </tr>
<tr bgcolor="#9999ff"> cell </tr>
</table>


Table Lab

Play around with bgcolors in your table tags and post a table you like.

As always, questions and comments are welcome.

Happy tabling,
Gnubee

Table Talk

Bgcolor