In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > bgColor (col, colgroup)

bgColor property (col, colgroup)

Browser support:

Sets or retrieves the background color of one or more specified columns in a table element.

This property is deprecated. Use the backgroundColor style property instead.

If you set the value of this property from JavaScript, the original value cannot be overridden, and it doesn't take any effect on cells placed within the current column.

Syntax:

object.bgColor;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: bgColor

Possible values:

A legal color value. It can be a hexadecimal, RGB or predefined color value. For more information, see the page for colors.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the bgColor attribute:

<table border="1px">
    <col bgcolor="red" />
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
    <tr>
        <td>red</td>
        <td>green</td>
        <td>yellow</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<table border="1px">
    <col style="background-color: #ff0000;" />
    <tr>
        <td>Apple</td>
        <td>Pear</td>
        <td>Peach</td>
    </tr>
    <tr>
        <td>red</td>
        <td>green</td>
        <td>yellow</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the bgColor property:

<head>
    <script type="text/javascript">
        function GetBgColor () {
            var col = document.getElementById ("myCol");
            alert (col.bgColor);
        }
    </script>
</head>
<body>
    <table border="1px">
        <col bgcolor="blue" id="myCol" />
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>

    The value of the bgColor property cannot be retrieved or overridden!
    <br />
    <button onclick="GetBgColor ();">Get background color!</button>
</body>