How To Replace Td Bgcolor With CSS Background Property

Attribute of

Dealing With Td Layout Issues In HTML5 - Quick Tutorial

What 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>

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.

Adam Wood

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