HTML bgcolor Attribute in Table – A Step-by-Step Guide with Examples and Best Practices

The HTML bgcolor attribute is an old, non-standard attribute that was used to set the background color of a table or a table cell. This attribute is deprecated in HTML5, which means that it is no longer recommended to use it. Instead, the CSS background-color property should be used to set the background color of tables and table cells.

Here’s an example of how to use the bgcolor attribute:

What is the bgcolor Attribute in HTML?

The bgcolor attribute in HTML was used to set the background color of a table, row, or cell. However, this attribute is deprecated in HTML5, and it is recommended to use CSS instead.

🔹 Note: While bgcolor still works in older browsers, the modern approach is to use CSS (background-color).

Step-by-Step Guide to Using bgcolor in Tables

Step 1: Applying bgcolor to a Table

You can use the bgcolor attribute inside the <table> tag to set the background color of the entire table.

<table border="1" bgcolor="lightblue">
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

🔹 Output: The entire table will have a light blue background.

Step 2: Applying bgcolor to Table Rows (<tr>)

You can also apply bgcolor to a specific row (<tr>) instead of the entire table.

<table border="1">
    <tr bgcolor="yellow">
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Best Practices & Modern Alternatives

Since bgcolor is deprecated, the recommended method is to use CSS (background-color).

Using CSS Instead of bgcolor

<style>
    table {
        border: 1px solid black;
        background-color: lightblue; /* Table background */
    }
    tr:nth-child(odd) {
        background-color: yellow; /* Alternate row color */
    }
    td {
        padding: 10px;
    }
    .special-cell {
        background-color: pink; /* Individual cell */
    }
</style>

<table>
    <tr>
        <td class="special-cell">Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td class="special-cell">Cell 4</td>
    </tr>
</table>

🔹 Advantages of Using CSS:
✅ More flexible and customizable.
✅ Works in all modern browsers.
✅ Allows for responsive designs.

Common Mistakes to Avoid

Using bgcolor in HTML5 (deprecated).
Use background-color in CSS instead.

Setting colors without contrast consideration
✅ Ensure good contrast between text and background for readability.