How to Change the Background Color of a Table

The method for changing the background colors of parts of a table on a website has changed over the years, becoming easier and less labor intensive with the introduction of style sheets.

The older method used the attribute bgcolor to change the background color of a table. It could also be used to change the color of a table row or a table cell. But the bgcolor attribute has been deprecated in favor of style sheets, so it's not the optimal way to manipulate a 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.

This will change the background color of an entire table:

<table style="background-color: #ff0000;">

To change the color of a single row, insert the background-color property in the <tr> tag:

<tr style="background-color: yellow;">

You can change the color of a single cell by adding the attribute to the <td> tag:

<td style="background-color: #000;">

You can also apply background colors to table heads, or the <th> tag, in the same way:

<th style="background-color: #000;">

If you don't want to add the style property background-color to the table, there are alternate ways to set the background color. For example, you can set the styles in a style sheet at the HEAD of your HTML document, or set them in an external style sheet. Changes these in the HEAD or in an external style sheet might appear like these for tables, rows, and cells:

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

The best way to set the background color for a column is to create a style class and then assign that class to the cells in that column. Creating a class allows you to assign that class to the cells in a specific column using one attribute.

The CSS:

td.ColColor { background-color: blue; }

The HTML:

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

One significant advantage of controlling background colors through a style sheet is the ability to change your color choice at a later time. Rather than having to go through the HTML document and make the change to every single cell, you can make a single change to the color choice in the CSS and it will immediately be applied to every instance where the class="ColColor" is used. This saves enormous amounts of time and greatly reduces the chances of errors, such as missing a cell color change.

Even if you've never changed the background colors of a table in a web document before, you can copy the examples above and experiment with this method on your own. You'll quickly discover how easy it is to make color changes using style tags—especially style sheets if you're working with large websites. Try the different options presented and pick the one that is ultimately the most comfortable for you.