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