The HTML DOM Style emptyCells property is used to specify how the empty cells of the table are displayed. By default, this property is set to show.
Following is the syntax for −
Setting the emptyCells property −
empty-cells: show|hide|initial|inherit;
Here, “show” displays the borders on empty cells while “hide” doesn’t. “Initial” sets it to default value and “inherit” inherits the parent property value.
Let us look at an example for the emptyCells property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#TABLE1 {
font-style: italic;
empty-cells: hide;
}
table,td {
margin: 5px;
padding: 3px;
border: 1px solid black;
}
</style>
<script>
function showEmptyCells() {
document.getElementById("TABLE1").style.emptyCells="show"
document.getElementById("Sample").innerHTML="The empty cells of the table will now be visible";
}
</script>
</head>
<body>
<table id="TABLE1">
<tr>
<td>demo</td>
<td></td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td></td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td></td>
<td></td>
</tr>
</table>
<p>Show the hidden cells of the above table by clicking the below button</p>
<button onclick="showEmptyCells()">Show cells</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Show cells” button −
