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

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>

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.

Adam Wood

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