The empty-cells property in CSS is used to control the visibility of borders and backgrounds in empty table cells. It helps improve the appearance and formatting of HTML tables.
- Used mainly with tables that have separate borders.
- Common values are show and hide.
- Helps create cleaner and more organized table layouts.
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: Here, we are using empty-cell: show property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<!--Driver Code Ends-->
<style>
table.geek {
empty-cells: show;
}
td {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
}
</style>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Example: Here, we are using empty-cell: hide property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<!--Driver Code Ends-->
<style>
table.geek {
empty-cells: hide;
}
td {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
}
</style>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Example: Here, we are using empty-cell: initial property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<!--Driver Code Ends-->
<style>
table.geek {
empty-cells: initial;
}
td {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
}
</style>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->
Example: Here, we are using empty-cell: inherit property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>empty-cell property</title>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->