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

Skip to content HTML / HTML Tables: Find Out When To Use Them (And When To Avoid) / Code Example For Tr In HTML (To Organize Table Rows) / Tr Bgcolor Is Obsolete: Here's How To Set Table Row Background Color NowDeprecated in HTML5. Do not use.Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn moreAttribute ofCode 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 column	Second column	Third column
First column	Second column	Third column
First column	Second column	Third 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 column	Second column	Third column
First column	Second column	Third column
First column	Second column	Third column
First column	Second column	Third column
First column	Second column	Third column
First column	Second column	Third column

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

Post navigation

What Does Td Colspan Have To Do With Tables In HTML?Applets

Search HTML.com

Search for:

Most Popular

• <var> HTML Tag300 views
• What Is Doxing? (And Why Is It So Scary?): An Infographic83 views
• New Audio HTML Element: Master It Out Now With Our Code Example61 views
• The Web Worker's Stress Busting Toolbox: 50 Tips to Improve Your Life41 views
• <meter> HTML Tag40 views