Introducción a CSS

10.2. Estilos avanzados

CSS define otras propiedades específicas para el control del aspecto de las tablas. Una de ellas es el tratamiento que reciben las celdas vacías de una tabla, que se controla mediante la propiedad empty-cells. Esta propiedad sólo se aplica cuando el modelo de bordes de la tabla es de tipo separate.

Propiedad empty-cells
Valores show | hide | inherit
Se aplica a Celdas de una tabla
Valor inicial show
Descripción Define el mecanismo utilizado para el tratamiento de las celdas vacías de una tabla

El valor hide indica que las celdas vacías no se deben mostrar. Una celda vacía es aquella que no tiene ningún contenido, ni siquiera un espacio en blanco o un  .

La siguiente imagen muestra las diferencias entre una tabla normal y una tabla con la propiedad empty-cells: hide:

Ejemplo de propiedad empty-cells

Figura 10.4 Ejemplo de propiedad empty-cells

Desafortunadamente, Internet Explorer 6 y las versiones anteriores no interpretan correctamente esta propiedad y muestran el ejemplo anterior de la siguiente manera:

Internet Explorer no soporta la propiedad empty-cells

Figura 10.5 Internet Explorer no soporta la propiedad empty-cells

Por otra parte, el título de las tablas se establece mediante el elemento <caption>, que por defecto se muestra encima de los contenidos de la tabla. La propiedad caption-side permite controlar la posición del título de la tabla.

Propiedad caption-side
Valores top | bottom | inherit
Se aplica a Los elementos caption
Valor inicial top
Descripción Establece la posición del título de la tabla

El valor bottom indica que el título de la tabla se debe mostrar debajo de los contenidos de la tabla. Si también se quiere modificar la alineación horizontal del título, debe utilizarse la propiedad text-align.

A continuación se muestra el código HTML y CSS de un ejemplo sencillo de uso de la propiedad caption-side:

.especial {
  caption-side: bottom;
}

<table class="especial" summary="Tabla genérica">
  <caption>Tabla 2.- Título especial</caption>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  ...
</table>

La siguiente imagen muestra el resultado de visualizar el ejemplo anterior en cualquier navegador:

Ejemplo de propiedad caption-side

Figura 10.6 Ejemplo de propiedad caption-side

Ejercicio 11

Ver enunciado

El resultado final del ejercicio anterior se podría completar añadiendo una pequeña mejora: que el color de las filas varíe cuando el usuario pasa el ratón por encima de cada fila. La pseudo-clase :hover permite añadir fácilmente esta característica:

Pseudo-clase :hover en las filas de una tabla

Figura 10.7 Pseudo-clase :hover en las filas de una tabla

La regla CSS necesaria se muestra a continuación:

table tr:hover {
  background: #FFFF66;
}