Easy Tutorial
❮ Prop Blockquote Cite Prop Audio Texttracks ❯

emptyCells Property


Definition and Usage

The emptyCells property sets or returns whether to show the borders and background of empty cells in a table.

Syntax

Set the emptyCells property:

Return the emptyCells property:

Value Description
show Displays the borders and background of empty cells, i.e., draws borders around empty cells.
hide Hides the borders and background of empty cells, i.e., does not draw borders around empty cells.
inherit The value of the emptyCells property is inherited from the parent element.

Browser Support

All major browsers support the emptyCells property.

Note: The default value varies across different browsers. In IE, Chrome, and Safari, the default value is "show", while in Firefox and Opera, the default value is "hide".

Note: IE7 and earlier versions do not support the emptyCells property. IE8 only supports the emptyCells property if the !DOCTYPE is specified. IE9 supports the emptyCells property.


Example

Change the display mode of empty cells:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function show(){
    document.getElementById("myTable").style.emptyCells="show";
}
function hide(){
    document.getElementById("myTable").style.emptyCells="hide";
}
</script>
</head>
<body>

<table id="myTable" border="1">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td></td>
      </tr>
</table>
<br>
<button type="button" onclick="show()">Show Empty Cells</button>
<button type="button" onclick="hide()">Hide Empty Cells</button>
<p><b>Note:</b> Internet Explorer 8 and earlier versions must declare the `!DOCTYPE` to support the `empty-cells` property.</p>

</body>
</html>

❮ Prop Blockquote Cite Prop Audio Texttracks ❯