Saltar la navegación

6.1.- Las tablas con CSS.

Recomendación

A medida que vayas estudiando las propiedades de este apartado también puedes visitar el siguiente enlace de la web de la W3C donde encontrarás un resumen de las propiedades CSS más utilizadas para dar forma a las tablas.

Propiedades CSS para tablas

Para controlar la presentación de las tablas tenemos las propiedades:caption-side, table-layout, border-collapse, border-spacing, empty-cells y display.

caption-side

Esta propiedad sirve para indicar dónde se pone el título de la tabla. Puede tener los valores: top, bottom, left y right.

La recomendación CSS2.1 recoge la posibilidad de desplazar el contenido de la etiqueta caption a la izquierda o a la derecha con text-align, pero siempre manteniéndose por encima o por debajo de la tabla.

empty-cells

Esta propiedad soluciona la carencia que, al no dibujar las celdas que estaban vacías, obligaba a poner un espacio en blanco usando el carácter &nbsp . Los valores que admite son:

  • show que permite mostrar los bordes y fondos como en las celdas con contenido.
  • hide que permite ocultar los bordes y fondos de las celdas vacías.
  • inherit que permite heredar el valor de empty-cells que tenga su elemento padre.

border-collapse

Permite establecer el modo en el que se dibujan los bordes de las tablas: separate (separados), collapse (juntos) e inherit. En el modo separate, cada celda está rodeada por su borde haciendo el efecto de un borde con una línea doble, mientras que, en el modo collapse las celdas contiguas comparten sus bordes.

border-spacing

Permite establecer la separación entre celdas contiguas. Para hacerlos se indica el valor del espaciado horizontal seguido del valor del espaciado vertical. Si se escribe un único valor, la separación horizontal y vertical serán iguales.

table-layout

Permite definir el modo en el que el navegador dibujará la tabla ya que puede hacerse de dos formas. Los valores que admite son:

  • fixed dibuja la tabla basándose en las medidas establecidas en el código fuente. Con este valor se consigue que el sistema trabaje más rápido.
  • auto dibuja la tablas basándose en el contenido de sus celdas. Es el valor por defecto.

Ejemplos:

table{  border:#000 solid thin;  /* Para que los bordes aparezcan */
        border-collapse: separate; /* Bordes separados */ 
        border-spacing: 0.5em 1em; /* Separación de los bordes */
        empty-cells: show;  /* Las celdas vacías se muestran */ 
}

table caption { caption-side: bottom;  /* El título de la tabla aparece debajo */ }

Recomendación

Una forma común de trabajar es usando plantillas que adaptamos a nuestro gusto. En el siguiente enlace accederás a la web de DIV TABLE, en donde podemos diseñar en linea nuestra tabla y exportar los archivos HTML y CSS generados.

Generados de tablas con CSS.

Ejercicio resuelto

En el siguiente enlace podrás descargar el archivo que contiene el código fuente del que tendrás que partir para realizar el ejercicio propuesto.

Código fuente (0.01 MB)

Una vez descargado el código puedes abrirlos con tu navegador. Verás que el resultado es el que se muestra en la imagen siguiente:

Ilustración con una captura de pantalla donde se ve un navegador mostrando una web de la que se parte para la realización del ejercicio.

Tendrás que editar el código y determinar las reglas CSS necesarias para que el resultado sea lo más parecido posible al de la siguiente imagen (Nota: Aunque no sale en la imagen, el puntero está sobre la primera fila, por eso se ve de color amarillo):

Ilustración con una captura de pantalla donde se ve un navegador mostrando una web que se propone programar.