HTML | DOM Style emptyCells Property

Last Updated : 08 Aug, 2022

Sometimes HTML tables contain empty cells. The DOM Style emptyCells is used to display borders and background for the empty cells.

Syntax:

It is used to return the emptyCells property.

object.style.emptyCells

It is used to set emptyCells property.

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

Return Value:A string representing the border and background of empty cells.

Property Values:

show: It means that the borders and background on empty cells will be shown. It is the default value of this property.
hide: It means that the borders and background on empty cells won't be shown.
initial: It makes the property use its default value (i.e. show).
inherit: It inherits the property from its parents element.

Example-1: The following code shows how to set the emptyCells property between the show and hide.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style emptyCells Property
    </title>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>DOM Style emptyCells Property</h2>

        <table id="a1" border="1">
            <tr>
                <th>Student Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
                <td>19</td>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td></td>
            </tr>
        </table>
        <br>

        <button type="button" onclick="hide()">
          Hide empty cells
        </button>
        
        <button type="button" onclick="show()">
          Show empty cells
        </button>

        <!-- script to show or hide emptyCell border -->
        <script>
            function hide() {
                document.getElementById("a1").style.emptyCells 
                                              = "hide";
            }

            function show() {
                document.getElementById("a1").style.emptyCells 
                                              = "show";
            }
        </script>
    </center>
</body>

</html>

Output:

Before click on Hide button:

before

After clicking Hide button:

after

Example-2: The following code shows how to get the emptyCells property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style emptyCells Property
    </title>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>DOM Style emptyCells Property</h2>
        <table id="a1" border="1" 
               style="empty-cells:hide;">
            <tr>
                <td></td>
                <td>$</td>
            </tr>
            <tr>
                <td>@</td>
                <td></td>
            </tr>
        </table>
        <button type="button" onclick="myFunction()">
          test
        </button>
    </center>
  
    <script>
        function myFunction() {
            console.log(document.getElementById("a1"
                   ).style.emptyCells);
        }
    </script>
</body>

</html>