CSS empty-cells Property
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.
- 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: In this example, we are using empty-cell: show property.
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; } .Beginner { font-size: 17px; } </ style > </ head > < body > < center > < div class = "gfg" >w3wiki</ div > < div class = "Beginner" >A computer science portal for Beginner</ div > < 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 > </ body > </ html > |
Output:
Example: In this example, we are using empty-cell: hide property.
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; } .Beginner { font-size: 17px; } </ style > </ head > < body > < center > < div class = "gfg" >w3wiki</ div > < div class = "Beginner" >A computer science portal for Beginner</ div > < 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 > </ body > </ html > |
Output:
Example: In this example, we are using empty-cell: initial property.
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; } .Beginner { font-size: 17px; } </ style > </ head > < body > < center > < div class = "gfg" >w3wiki</ div > < div class = "Beginner" >A computer science portal for Beginner</ div > < 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 > </ body > </ html > |
Output:
Example: In this example, we are using empty-cell: inherit property.
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; } .Beginner { font-size: 17px; } </ style > </ head > < body > < center > < div class = "gfg" >w3wiki</ div > < div class = "Beginner" >A computer science portal for Beginner</ 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
- Edge
- Firefox
- Opera
- Safari
Contact Us