Tutorialspoint.dev

CSS | empty-cells Property

This property is used to specify that whether to display the borders or not in the empty cells in a table.

Syntax:

empty-cells: show|hide|initial|inherit;

Values of empty-cells property:

  • show
  • hide
  • initial
  • inherit

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.
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.
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.
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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter