Table Coloring

A few lessons ago I showed how to color the borders of your table. The first thing we'll learn in this lesson is how to color individual cell borders. As usual, the first thing we need is a table to work with.

Coloring the border of a cell follows basically the same procedure as the whole table. All you have to do is add the bordercolor attribute to the table data, or td tag.

Not a extremely pretty table in my opinion, but it does what I intended it to do. Remember that the bordercolor attribute doesn't work on some browsers. Here's the code:

<table border="1" bordercolor="red">
<tr>
<td bordercolor="blue">Cell 1
</td>
<td bordercolor="orange">Cell 2
</td>
</tr>
<tr>
<td bordercolor="gray">Cell 3
</td>
<td bordercolor="purple">Cell 4
</td>
</tr>
</table>

As just about every other attribute, you can use a conventional color name or a hexadecimal color code. For more color, let's add a background to the table. The attribute "background" is used for something else (we will discuss in the next lesson), so we must use the bgcolor attribute. Here's our updated table:

And the code:

<table border="1" bordercolor="red" bgcolor="green">
<tr>
<td bordercolor="blue">Cell 1
</td>
<td bordercolor="orange">Cell 2
</td>
</tr>
<tr>
<td bordercolor="gray">Cell 3
</td>
<td bordercolor="purple">Cell 4
</td>
</tr>
</table>

The table bgcolor acts as the background color for the whole table. Fortunately, you can do the same thing for each cell. All you do is put the bgcolor attribute inside each td tag, just like when you added bordercolor to them. I'm running out of colors to use in this table, so let's use pink for them all.

<table border="1" bordercolor="red" bgcolor="green">
<tr>
<td bordercolor="blue" bgcolor="pink">Cell 1
</td>
<td bordercolor="orange" bgcolor="pink">Cell 2
</td>
</tr>
<tr>
<td bordercolor="gray" bgcolor="pink">Cell 3
</td>
<td bordercolor="purple" bgcolor="pink">Cell 4
</td>
</tr>
</table>

Notice how the bgcolor attribute is used in much the same way as the bordercolor attribute, in both the table tag and the td tag. Here's the table:

Well that's a lot of information to take in in one lesson. The next lesson will focus on how to put images in your table's background.