HTML | DOM Style emptyCells Property

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before click on Hide button:

    before

  • After clicking Hide button:
    after

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking Test button:
    before
  • After clicking Test button:
    after

Supported Browsers: The browser supported by DOM Style emptyCells Property are listed below:

  • Google Chrome 1.2
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 4.0
  • Apple Safari 1.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.