HTML - DOM Style Object emptyCells Property

Quiz

HTML DOM Style Object emptyCells property is used to set or get whether to display or not the border and background property of empty cells.

Syntax

Set the emptyCells property:

object.style.emptyCells= "show | hide | initial | inherit";

Get the emptyCells property:

object.style.emptyCells;

Property Values

Value	Description
show	It is the default value which shows the border and background in empty cells.
hide	It does not show border and background in empty cells.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents border and background of empty cells.

Example of HTML DOM Style Object 'emptyCells' Property

The following example hides the empty cells.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object emptyCells Property
    </title>
    <style>
        table {
            border: aqua 2px solid;
        }
    </style>
</head>
<body>
    <p>Click to show or hide empty cells.</p>
    <button onclick="hide()">Hide</button>
    <button onclick="show()">Show</button>
    <br><br><br><br>
    <table id="border" border="1">
        <caption>Table No. 21</caption>
        <tr>
            <td>This is</td>
            <td>is</td>
        </tr>
        <tr>
            <td>an example</td>
            <td>table</td>
        </tr>
        <tr>
            <td>for</td>
            <td>caption side</td>
        </tr>
        <tr>
            <td></td>
            <td>Hiiiiii</td>
        </tr>
    </table>
    <script>
        function hide() {
            document.getElementById("border")
                .style.emptyCells = "hide";
        }
        function show() {
            document.getElementById("border")
                .style.emptyCells = "show";
        }        
    </script>
</body>
</html>

Supported Browsers

Property
emptyCells	Yes 1	Yes 12	Yes 1	Yes 1.2	Yes 4

html_dom.htm

Print Page