Skip to content
Related Articles

Related Articles

CSS | empty-cells Property

Improve Article
Save Article
  • Last Updated : 02 Aug, 2022
Improve Article
Save Article

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;

Example: 

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:

 image

hide property: This property is used to hide the border in empty-cell in the table.

Syntax:

empty-cell: hide;

Example: 

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:

 image

initial property: This property is used to set the default property.

Syntax:

empty-cell: initial;

Example: 

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:

 image

inherit property: This property is used to inherit the property from its parent.

Syntax:

empty-cell: inherit;

Example: 

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:

 image inherit property

Supported Browsers: The browsers supported by CSS | empty-cells Property are listed below:

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 8.0 and above
  • Firefox 1.0 and above
  • Opera 4.0 and above
  • Safari 1.2 and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!