CSS empty-cells Property
Last Updated :
21 Jul, 2023
This property is used to specify whether to display the borders or not in the empty cells in a table.
Syntax:
empty-cells: show|hide|initial|inherit;
Default Value: show
Property values:
- show property: This property is used to display the borders on empty cells.
- hide property: This property is used to hide the border in empty-cell in the table.
- initial property: This property is used to set the default property.
- inherit property: This property is used to inherit the property from its parent.
Example: In this example, we are using empty-cell: show property.
html
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<style>
table.geek {
empty-cells: show;
}
td {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
}
</style>
</head>
<body>
<center>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">A computer science
portal for geeks</div>
<h2>empty-cells: show;</h2>
<table class="geek" border="1">
<tr>
<td>C Programming</td>
<td>C++ Programming</td>
<tr>
<td>Java</td>
<td></td>
</tr>
</table>
</center>
</body>
</html>
|
Output: 
Example: In this example, we are using empty-cell: hide property.
html
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<style>
table.geek {
empty-cells: hide;
}
td {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
}
</style>
</head>
<body>
<center>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">A computer science
portal for geeks</div>
<h2>empty-cells: show;</h2>
<table class="geek" border="1">
<tr>
<td>C Programming</td>
<td>C++ Programming</td>
<tr>
<td>Java</td>
<td></td>
</tr>
</table>
</center>
</body>
</html>
|
Output: 
Example: In this example, we are using empty-cell: initial property.
html
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<style>
table.geek {
empty-cells: initial;
}
td {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
}
</style>
</head>
<body>
<center>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">A computer science
portal for geeks</div>
<h2>empty-cells: show;</h2>
<table class="geek" border="1">
<tr>
<td>C Programming</td>
<td>C++ Programming</td>
<tr>
<td>Java</td>
<td></td>
</tr>
</table>
</center>
</body>
</html>
|
Output:
Example: In this example, we are using empty-cell: inherit property.
html
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<style>
table.geek {
empty-cells: initial;
}
.g4g {
empty-cells: inherit;
}
td {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
}
</style>
</head>
<body>
<center>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">A computer science
portal for geeks</div>
<h2>empty-cells: show;</h2>
<table class="geek" border="1">
<tr>
<td>C Programming</td>
<td>Algorithm</td>
</tr>
<tr>
<td></td>
<td>
<table class="g4g" border="1">
<tr>
<td>DP</td>
<td>Backtracking</td>
</tr>
<tr>
<td>Sorting</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
|
Output: 
Supported Browsers: The browsers supported by CSS | empty-cells Property are listed below:
- Google Chrome
- Edge
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...