How To Replace Td Bgcolor With CSS Background Property » - HTML

Skip to content HTML / Dealing With Td Layout Issues In HTML5 - Quick Tutorial / How To Replace Td Bgcolor With CSS Background PropertyDeprecated 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 ofDealing With Td Layout Issues In HTML5 - Quick TutorialWhat does How To Replace Td Bgcolor With CSS Background Property do?Sets the background color of a single cell in a table.

Code Example

<table> <tr> <td>This cell has no bgcolor attribute.</td> <td bgcolor="blue">This cell has a bgcolor attribute.</td> </tr> </table>

This cell has no bgcolor attribute.

This cell has a bgcolor attribute.

Don’t Use bgcolor

Before CSS enjoyed broad browser support, many attributes sprang up that allowed web developers to style HTML tables by adding styling directly to each HTML element. Today, we no longer use HTLM to style websites so all of these attributes, including bgcolor have been deprecated. Don’t use them. Instead, use the CSS background property.

How bgcolor Worked

The bgcolor would accept a generic color name, a hex color code, or an RGB color code and apply that color to just the specific <td> element. In modern web design, the same effect can be accomplished by using CSS.

<style> .blue { background: blue; } </style> <table> <tr> <td class="blue">This cell is styled with CSS.</td> <td bgcolor="blue">This cell has a bgcolor attribute.</td> </tr> </table>

Most browsers still support the bgcolor attribute. So you should see both cells styled in the same fashion below. However, browsers may drop support for bgcolor at any time. To ensure that all of your site’s users have the best experience possible, stick to CSS and avoid this deprecated attribute.

.blue{background: blue;}

This cell is styled with CSS.

This cell has a bgcolor attribute.

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 Tag306 views
• What Is Doxing? (And Why Is It So Scary?): An Infographic85 views
• New Audio HTML Element: Master It Out Now With Our Code Example62 views
• The Web Worker's Stress Busting Toolbox: 50 Tips to Improve Your Life43 views
• <meter> HTML Tag41 views