Propiedad border-spacing

Ejemplos de uso

La propiedad border-spacing establece la separación entre las celdas de la tabla. Por su propia definición, esta propiedad sólo tiene sentido cuando se utiliza el modelo de bordes separados (controlado mediante la propiedad border-collapse).

Si sólo se indica una medida, hace referencia a la separación vertical y horizontal entre todas las celdas:

Las celdas de la tabla del ejemplo anterior están separadas 5px entre sí:

table {
  border-collapse: separate;
  border-spacing:  5px;
}

Si se indican dos medidas, la primera hace referencia a la separación horizontal y la segunda es la separación vertical entre las celdas:

En la tabla del ejemplo anterior, las celdas están mucho más separadas verticalmente que horizontalmente, ya que la regla CSS utilizada es:

table {
  border-collapse: separate;
  border-spacing:  5px 15px;
}

Si la tabla también tiene un borde visible, las celdas adyacentes pueden mostrarse muy juntas, ya que su separación es la que establece la propiedad border-spacing:

Para aumentar la separación entre los bordes de la tabla y las celdas adyacentes, se emplea la propiedad padding sobre la tabla para añadir espacio de relleno en el lado o lados deseados: