Definición | Establece la separación de las celdas de la tabla |
---|---|
Valores permitidos | Existen dos opciones diferentes para establecer el valor o valores de esta propiedad: |
Valor inicial | 0 |
Se aplica a | Los elementos de tipo tabla |
Válida en | medios visuales |
Se hereda | si |
Definición en el estándar | w3.org/TR/CSS21/tables.html#propdef-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:
Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
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:
Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
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
:
Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
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:
Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |