How to Change the Background Color of a Table

Many novice or amateur web designers want to know how to change the background color of a table. In a matter of minutes, you can learn how to execute this technique with this brief tutorial. The method is not as intimidating as it seems. Changing a table's background color is as simple as adding one attribute on the cell, row or table you want colored.

The attribute bgcolor will change the background color of the table as well as the current table row or the current table cell. But the bgcolor attribute is deprecated in favor of style sheets, so it's not the most optimal way to change the table's background color. The better way to change the background color is to add the style property background-color to the table, row or cell tag. See the example below to learn how.

<table style="background-color: #ff0000;">
<tr style="background-color: yellow;">
<td style="background-color: #000;">

If for some reason, you don't want to add the style property background-color to the table, there are alternatives from which to choose. For example, you can set the styles in a style sheet in the head of your document or in an external style sheet. See the following: 

table { background-color: #ff0000; }
tr { background-color: yellow; }
td { background-color: #000; }

The best way to set the background color on a column is to create a style class and then assign that class to the cells in that column. Look at the examples below to learn how to do this. 

The CSS:

td.blueCol { background-color: blue; }

The HTML:

<table>
<tr><td class="blueCol">cell 1</td><td>cell 2</td></tr>
<tr><td class="blueCol">cell 1</td><td>cell 2</td></tr>
</table>

Even if you've never changed the background colors of a table before, you can copy the examples above to try this method on your own. Try the different options presented and choose the one you with which you ultimately feel most comfortable. And if you want more information about HTML tables, consult this FAQ for additional details.