CSS Table Colors

The final step in making our HTML tables look just how we want is to adjust their colors. By default tables inherit their background color from the page background color, and add a gray border. Using CSS we can use whatever colors we want for the cell backgrounds and borders.

Adjust your HTML table's background color

We can alter the background color of our table by using the background-color property:

table {
	background-color: lime;
}

This will produce:

Company accounts
Year Income Expenditure Profit
2004 10m 8m 2m
2005 13m 10m 3m
2006 16m 12m 4m

As well as adjusting the background color for the entire table, we can apply colors to individual cells or rows. We could do this by using inline styles within our table declaration, but a better way is to define different classes in our stylesheet, such as:

td.green {
	background-color: green;
}

td.red {
	background-color: red;
}

We can then apply these classes to individual cells like so:

<table>
<tr>
<td class="red">This cell is red</td>
<td class="green">This cell is green</td>
</tr>
</table>

Of course, within our declarations we can specify any other properties we want besides background color, such as font color and font weight.

Adjust your HTML table's border colors

In the same way that we changed our table's background colors we can also adjust the border colors for our <table>, <tr>, <th> and <td> tags using the border-color property. For example:

table {
	border-color: black;
}

When specifying border colors, there is no one tag that will alter the border colors for the entire table: the <table> tag only affects the very outside border of our table, and the <tr>, <th>, and <td> tags will only affect table rows, headings and individual cells respectively. This means that if, for example, we want all of our borders to be black, we need to set the border-color property for more than one tag. The best way to figure out exactly which ones to adjust is to experiment.