Skip to content
Related Articles

Related Articles

CSS | empty-cells Property
  • Last Updated : 08 Aug, 2019

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;

Property values:

show property: This property is used to display the borders on empty cells.

  • Syntax:
    empty-cell: show;
  • Example:




    <!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:




    <!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:




    <!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:




    <!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
  • Internet Esplorer 8.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.2

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :