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 */ }