CSS emptycells Property (original) (raw)

CSS empty-cells Property

Last Updated : 22 May, 2026

The empty-cells property in CSS is used to control the visibility of borders and backgrounds in empty table cells. It helps improve the appearance and formatting of HTML tables.

• Used mainly with tables that have separate borders.
• Common values are show and hide.
• Helps create cleaner and more organized table layouts.

**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: Here, we are using empty-cell: show property.

html `

<style>
    table.geek {
        empty-cells: show;
    }

    td {
        text-align: center;
    }

    .gfg {
        font-size: 40px;
        font-weight: bold;
        color: green;
    }

    .geeks {
        font-size: 17px;
    }
</style>

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

`

**Example: Here, we are using empty-cell: hide property.

html `

<style>
    table.geek {
        empty-cells: hide;
    }

    td {
        text-align: center;
    }

    .gfg {
        font-size: 40px;
        font-weight: bold;
        color: green;
    }

    .geeks {
        font-size: 17px;
    }
</style>

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

`

**Example: Here, we are using empty-cell: initial property.

html `

<style>
    table.geek {
        empty-cells: initial;
    }

    td {
        text-align: center;
    }

    .gfg {
        font-size: 40px;
        font-weight: bold;
        color: green;
    }

    .geeks {
        font-size: 17px;
    }
</style>

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

`

**Example: Here, we are using empty-cell: inherit property.

html `

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

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

`