Open In App
Related Articles

HTML | DOM Style emptyCells Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>

                    

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.0 and above
  • Edge 12.0 and above
  • Internet Explorer 8.0 and above
  • Firefox 1.0 and above
  • Opera 4.0 and above
  • Apple Safari 1.2 and above


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads