Using colour in a table

You can add colour to your tables by using the bgcolor and bordercolor attributes. These attributes are available in the <table>, <tr>, and <td> tags, so you can apply colours to the whole table, to selected rows, or to individual cells.

You might want to change the colour in a table to make it stand out from the rest of the page, for example, to display a warning message. To do this set the bgcolor attribute on the <table> tag. This example is set to red:

The next example changes the background colour for a row and for cells. It uses the same colour for the column headings, but different colours for the two columns in the table:

<table bordercolor="navy" border="2">
<tr bgcolor="gray">
<th>Fruits</th><th>Vegetables</th>
<tr>
<td bgcolor="lime">Apples</td>
<td bgcolor="aqua">Celery</td>
<tr>
<td bgcolor="lime2>Oranges</td>
<td bgcolor="aqua">Carrots</td>
</table>

This displays (rather revoltingly) as:

The bordercolor attribute sets the colour of the borders round the table, row, or cell. The colour can be either a colour name or the RGB value. Our second example has navy borders.

In newer versions of Internet Explorer, you can also use bordercolorlight and bordercolordark attributes. This displays the top and left sides of the table border in a lighter shade and the bottom and right sides of the table in a darker shade. Netscape does not support these attributes.