Deprecated in HTML5. Do not use.

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

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
Attribute of
Code Example For Tr In HTML (To Organize Table Rows)
What does Tr Bgcolor Is Obsolete: Here's How To Set Table Row Background Color Now do?
Sets the background color for a single table row in an HTML table.

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>
First columnSecond columnThird column
First columnSecond columnThird column
First columnSecond columnThird column

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;}

First columnSecond columnThird column
First columnSecond columnThird column
First columnSecond columnThird column
First columnSecond columnThird column
First columnSecond columnThird column
First columnSecond columnThird column
Adam is a technical writer who specializes in developer documentation and tutorials.