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.
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.
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  
. 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 */ }
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.
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.
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:
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):