Esta propiedad se utiliza para especificar si mostrar o no los bordes en las celdas vacías de una tabla.
Sintaxis:
empty-cells: show|hide|initial|inherit;
Valor por defecto:
- mostrar
Valores de propiedad: mostrar propiedad: esta propiedad se usa para mostrar los bordes en celdas vacías.
- Sintaxis:
empty-cell: show;
- Ejemplo:
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>
- Producción:
propiedad hide: esta propiedad se usa para ocultar el borde en una celda vacía en la tabla.
- Sintaxis:
empty-cell: hide;
- Ejemplo:
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>
- Producción:
propiedad inicial: esta propiedad se utiliza para establecer la propiedad predeterminada.
- Sintaxis:
empty-cell: initial;
- Ejemplo:
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>
- Producción:
heredar propiedad: esta propiedad se utiliza para heredar la propiedad de su padre.
- Sintaxis:
empty-cell: inherit;
- Ejemplo:
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>
- Producción:
Navegadores compatibles: Los navegadores compatibles con CSS | Las propiedades de celdas vacías se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 8.0
- Firefox 1.0
- Ópera 4.0
- Safari 1.2
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA