La Propiedad BORDER-SPACING

La propiedad border-spacing en CSS se utiliza para establecer la distancia entre los bordes de las celdas adyacentes en una tabla.

La propiedad border-spacing en CSS se utiliza para establecer la distancia entre los bordes de las celdas adyacentes en una tabla. Es una propiedad que solo se aplica a las tablas cuando su propiedad border-collapse está establecida en separate (que es el valor predeterminado).

Sintaxis Básica

La sintaxis básica para usar la propiedad border-spacing es la siguiente:

CSS 

table {
  border-spacing: <distancia>;
}

Donde <distancia> puede ser un valor único o dos valores.

Valores de la Propiedad `border-spacing`

Un Valor: Si se proporciona un solo valor, este se aplicará tanto al espaciado horizontal como al vertical entre las celdas. El valor debe ser una unidad de longitud válida (por ejemplo, píxeles, ems, etc.).
CSS
```
table {
  border-spacing: 10px; /* Espacio de 10px horizontal y verticalmente entre celdas */
}
```
Dos Valores: Si se proporcionan dos valores, el primero representará el espaciado horizontal entre las celdas (de izquierda a derecha), y el segundo representará el espaciado vertical entre las celdas (de arriba a abajo). Ambos valores deben ser unidades de longitud válidas.
CSS
```
table {
  border-spacing: 20px 5px; /* Espacio de 20px horizontal y 5px verticalmente entre celdas */
}
```

Importancia de `border-collapse: separate`

Es crucial entender que la propiedad border-spacing solo tiene efecto cuando la propiedad border-collapse de la tabla está establecida en separate. Si border-collapse está establecido en collapse (que hace que los bordes de las celdas adyacentes se compartan en un solo borde), la propiedad border-spacing será ignorada.

CSS 

/* Para que border-spacing funcione, necesitas: */
table {
  border-collapse: separate; /* Este es el valor predeterminado, pero es bueno especificarlo */
  border-spacing: 15px;
}

/* Si border-collapse está en collapse, border-spacing no tendrá efecto: */
.tabla-colapsada {
  border-collapse: collapse;
  border-spacing: 15px; /* ¡Este valor no hará nada! */
}

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar la propiedad border-spacing:

Ejemplo 1: Espaciado uniforme entre celdas

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: separate;
    border-spacing: 10px;
    border: 1px solid black; /* Borde para la tabla */
  }
  th, td {
    border: 1px solid black; /* Borde para las celdas */
    padding: 8px;
    text-align: left;
  }
</style>
</head>
<body>

  <table>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
    <tr>
      <td>Juan</td>
      <td>30</td>
    </tr>
    <tr>
      <td>María</td>
      <td>25</td>
    </tr>
  </table>

</body>
</html>

En este ejemplo, habrá un espacio de 10 píxeles tanto horizontal como verticalmente entre los bordes de las celdas.

Ejemplo 2: Espaciado horizontal y vertical diferente

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: separate;
    border-spacing: 20px 5px; /* 20px horizontal, 5px vertical */
    border: 1px solid black;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
</style>
</head>
<body>

  <table>
    <tr>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>$1200</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$25</td>
    </tr>
  </table>

</body>
</html>

Aquí, el espacio horizontal entre las celdas será de 20 píxeles, mientras que el espacio vertical será de solo 5 píxeles.

Ejemplo 3: border-spacing no tiene efecto con border-collapse: collapse

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .tabla-colapsada {
    border-collapse: collapse;
    border-spacing: 15px; /* No tendrá ningún efecto */
    border: 1px solid black;
  }
  .tabla-colapsada th, .tabla-colapsada td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
</style>
</head>
<body>

  <table class="tabla-colapsada">
    <tr>
      <th>Ciudad</th>
      <th>País</th>
    </tr>
    <tr>
      <td>Nueva York</td>
      <td>Estados Unidos</td>
    </tr>
    <tr>
      <td>Tokio</td>
      <td>Japón</td>
    </tr>
  </table>

</body>
</html>

En este caso, los bordes de las celdas se fusionarán en un solo borde, y el border-spacing no tendrá ningún efecto visual.

Casos de Uso Comunes

Crear tablas con un aspecto más espacioso y menos denso.
Ajustar la separación entre las celdas para mejorar la legibilidad del contenido.
Implementar diseños de tabla específicos donde se requiere un espaciado visible entre los bordes de las celdas.

Compatibilidad del Navegador

La propiedad border-spacing tiene una excelente compatibilidad con todos los navegadores modernos.

Consideraciones

Asegúrate de que la propiedad border-collapse de la tabla esté establecida en separate para que border-spacing funcione.
Los valores de border-spacing no pueden ser negativos.
El espaciado se aplica entre los bordes exteriores de las celdas adyacentes.

Conclusión

La propiedad border-spacing es una herramienta útil en CSS para controlar la separación entre los bordes de las celdas en una tabla. Al utilizarla junto con border-collapse: separate, puedes personalizar la apariencia de tus tablas y mejorar la presentación de tus datos. Recuerda siempre verificar que border-collapse esté configurado correctamente para que border-spacing tenga el efecto deseado.