56 - Pseudo-clase: empty




Problema:

Desarrollar una página que muestre una tabla HTML con un conjunto de filas y columnas. Dejar algunas celdas de la tabla vacía. Utilizando la pseudo-clase empty definir color de fondo amarillo para las celdas vacías.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<table>
  <tr>
    <td></td><td>fila 1</td>
  </tr>
  <tr>
    <td>fila 2</td><td></td>
  </tr>
  <tr>
    <td>fila 3</td><td>fila 3</td>
  </tr>
  <tr>
    <td>fila 4</td><td>fila 4</td>
  </tr>
  <tr>
    <td>fila 5</td><td></td>
  </tr>
  <tr>
    <td>fila 6</td><td>fila 6</td>
  </tr>
  <tr>
    <td></td><td>fila 7</td>
  </tr>
</table>
</body>
</html>
td:empty {
  background-color:yellow;
}
table {
  border-collapse: collapse;
  width:80%;
  margin:0 auto;
}

td {
  border: 1px solid #000;
  text-align:center;
  padding:0.5em;
}
Ver solución


Retornar