CSS | empty-cells Property - GeeksforGeeks

06 Sep, 2021
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.
Syntax:empty-cell: show;
empty-cell: show;
Example:htmlhtml<!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>            </trA>            <tr>                <td>Java</td>                <td></td>            </tr>            </table>        </center>    </body></html>                    
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>            </trA>            <tr>                <td>Java</td>                <td></td>            </tr>            </table>        </center>    </body></html>                    
Output:
hide property: This property is used to hide the border in empty-cell in the table.
Syntax:empty-cell: hide;
empty-cell: hide;
Example:htmlhtml<!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>            </trA>            <tr>                <td>Java</td>                <td></td>            </tr>            </table>        </center>    </body></html>                    
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>            </trA>            <tr>                <td>Java</td>                <td></td>            </tr>            </table>        </center>    </body></html>                    
Output:
initial property: This property is used to set the default property.
Syntax:empty-cell: initial;
empty-cell: initial;
Example:htmlhtml<!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>            </trA>            <tr>                <td>Java</td>                <td></td>            </tr>            </table>        </center>    </body></html>                    
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>            </trA>            <tr>                <td>Java</td>                <td></td>            </tr>            </table>        </center>    </body></html>                    
Output:
inherit property: This property is used to inherit the property from its parent.
Syntax:empty-cell: inherit;
empty-cell: inherit;
Example:htmlhtml<!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>                    
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 1.0
Internet Esplorer 8.0
Firefox 1.0
Opera 4.0
Safari 1.2
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hritikbhatnagar2182
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property