How do you change the background color of a row in html table?

Tr Bgcolor Is Obsolete: Here's How To Set Table Row Background Color Now

In HTML Attributes

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Code Example

<table>
  <tr bgcolor="#ddd">
    <td>First column</td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr bgcolor="#eee">
    <td>First column</td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr bgcolor="#ddd">
    <td>First column</td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

Setting the Background Color of Table Rows

The bgcolor attribute is now deprecated, but it was once the correct way to control the background color of table rows. Color names (such as “blue”), hex numbers, and rgb color codes could all be used with the bgcolor attribute. While browser support for this attribute is still pretty good, you really shouldn’t use it anymore. Instead, use the CSS background-color property control the color of table rows. Using CSS instead of HTML attributes has the added benefit of being applied to multiple elements simultaneously if you wish. For example, if we wanted to create a table where the color of each row alternated between hex colors #ddd and #eee, we can do that with just two CSS rules. However, if we used HTML attributes, we would have to add the attribute to every single table row.

<style> .example-table tr:nth-child(2n+1) {   background-color: #ddd; } .example-table tr:nth-child(2n+0) {   background-color: #eee; } </style> <table class="example-table">   <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>   <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>   <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>   <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>   <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>   <tr><td>First column</td><td>Second column</td><td>Third column</td></tr> </table> 

What that bit of code does is use the nth-child selector apply the background color #ddd to every odd numbered <tr> and the #eee background color to every even numbered row.

.example-table tr:nth-child(2n+1){background-color: #ddd;}.example-table tr:nth-child(2n+0){background-color: #eee;}

Adam is a technical writer who specializes in developer documentation and tutorials.

Updated on January 31, 2021

What to Know

• Easiest: add the style property background-color to the table, row, or cell tag.
• Next easiest: use the attribute bgcolor.

This article explains the methods for changing the background colors of parts of a table on a website.

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 example changes the background color of an entire table:

To change the color of a single row, insert the background-color property in the

You can change the color of a single cell by adding the attribute to the

You can also apply background colors to table heads, or the  

Change Background Color Using Style Sheets

However, it's better to avoid using the background-color attribute in favor of a correctly formatted style sheet. 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 like these in the HEAD or 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; }

Setting Column Background Color

The best way to set the background color for a column is to create a style class and then assign it to the column's cells. 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:

cell 1cell 2cell 1cell 2

One significant advantage of controlling background colors through a style sheet is that you can change your color choice later. Rather than going through the HTML document and making the change to every single cell, you can make a single change to the color choice in the CSS that will immediately be applied to every instance where the class="ColColor" syntax appears.

Although interspersing CSS into your HTML, or calling a separate CSS file, adds a bit of administrative overhead beyond just modifying an HTML attribute, you'll find that relying on CSS reduces errors, speeds up development, and improves the portability of your document.