La Propiedad BORDER-COLLAPSE

La propiedad border-collapse en CSS se utiliza para controlar cómo se renderizan los bordes de una tabla HTML.

La propiedad border-collapse en CSS se utiliza para controlar cómo se renderizan los bordes de una tabla HTML. Especifica si los bordes de las celdas adyacentes deben colapsarse en un solo borde o deben separarse. Esta propiedad solo se aplica a los elementos <table>.

Sintaxis Básica

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

CSS 

table {
  border-collapse: <valor>;
}

Donde <valor> puede ser uno de los siguientes:

separate: Este es el valor predeterminado. Los bordes de cada celda de la tabla se renderizan de forma independiente. Esto significa que si aplicas un borde a la tabla y a sus celdas, verás dos bordes separados entre ellas (con un espacio entre ellos).
collapse: Los bordes de las celdas adyacentes se colapsan en un solo borde. Si los bordes adyacentes tienen estilos diferentes, se aplicará un conjunto de reglas para determinar qué estilo se muestra.

Valores en Detalle

1. `separate` (Predeterminado)

Cuando border-collapse se establece en separate, cada celda de la tabla (incluido el propio elemento <table>) tiene sus propios bordes individuales.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 2px solid black;
  }
  th, td {
    border: 1px solid red;
    padding: 8px;
  }
</style>
</head>
<body>

  <table>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
    </tr>
  </table>

</body>
</html>

En este ejemplo, verás un borde negro alrededor de la tabla y bordes rojos separados alrededor de cada celda. Habrá un pequeño espacio entre el borde de la tabla y los bordes de las celdas, así como entre los bordes de las celdas adyacentes.

Propiedad relacionada: border-spacing

Cuando border-collapse está en separate, puedes usar la propiedad border-spacing para controlar la distancia entre los bordes de las celdas adyacentes.

CSS 

table {
  border: 2px solid black;
  border-collapse: separate; /* Asegúrate de que esté en 'separate' */
  border-spacing: 10px 5px; /* Espacio horizontal de 10px, espacio vertical de 5px */
}
th, td {
  border: 1px solid red;
  padding: 8px;
}

Si solo especificas un valor para border-spacing, se aplicará tanto al espaciado horizontal como al vertical.

2. `collapse`

Cuando border-collapse se establece en collapse, los bordes de las celdas adyacentes se fusionan en un solo borde. Esto es útil para crear tablas con un aspecto más tradicional, donde las líneas de la cuadrícula son continuas.

Ejemplo:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 2px solid black;
    border-collapse: collapse; /* Colapsa los bordes */
    width: 100%;
  }
  th, td {
    border: 1px solid red;
    padding: 8px;
    text-align: left;
  }
</style>
</head>
<body>

  <table>
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
    <tr>
      <td>Dato 1</td>
      <td>Dato 2</td>
    </tr>
  </table>

</body>
</html>

En este ejemplo, el borde entre las celdas y el borde alrededor de la tabla se fusionarán en un solo borde. Si el borde de la tabla y el borde de las celdas tuvieran el mismo estilo y color, parecería una cuadrícula uniforme.

Resolución de conflictos de bordes con collapse

Cuando los bordes adyacentes tienen diferentes estilos, anchos o colores, el navegador debe decidir qué estilo mostrar. Se siguen las siguientes reglas de prioridad (de mayor a menor):

border-style con valor hidden: Tiene la prioridad más alta. Si algún borde adyacente tiene border-style: hidden, ese borde será el único que se muestre en esa ubicación, y ningún otro borde se dibujará.
border-style con valores distintos de hidden: Si no hay bordes hidden, se considera el estilo del borde en el siguiente orden de prioridad: double, solid, dashed, dotted, ridge, outset, groove, y el de menor prioridad es inset.
Ancho del borde: Si los estilos son los mismos, se elige el borde con el mayor border-width.
Color del borde: Si los estilos y los anchos son los mismos, se elige el color del borde según la especificidad de la regla CSS. Si las especificidades son iguales, el color del borde de la celda aparece después del color del borde de la fila, que aparece después del color del borde del grupo de columnas, que aparece después del color del borde de la columna, que aparece después del color del borde del grupo de filas, que aparece después del color del borde de la tabla.

Ejemplo de conflicto de bordes:

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 8px;
    text-align: left;
  }
  table, th, td {
    border: 1px solid black; /* Borde negro predeterminado */
  }
  tr:nth-child(odd) td {
    border-bottom: 3px dashed red; /* Borde inferior rojo de guiones */
  }
  th:first-child, td:first-child {
    border-right: 2px dotted blue; /* Borde derecho azul de puntos */
  }
</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, verás cómo se combinan diferentes estilos y anchos de borde según las reglas de prioridad.

Casos de Uso Comunes

separate: Puede ser útil cuando quieres un diseño de tabla con espacio visual entre las celdas, similar a una hoja de cálculo.
collapse: Es la opción más común para crear tablas con un aspecto tradicional de cuadrícula, donde las líneas de los bordes se unen para formar una red continua.

Compatibilidad del Navegador

La propiedad border-collapse es compatible con todos los navegadores web modernos.

Consideraciones

La propiedad border-collapse solo se aplica al elemento <table>. No tiene efecto en otros elementos HTML.
Cuando usas border-collapse: collapse, los bordes de la tabla y los bordes de las celdas se superponen. Asegúrate de que tus estilos sean coherentes para evitar resultados visuales inesperados.

Ejemplo Práctico Completo

HTML 

<!DOCTYPE html>
<html>
<head>
<style>
  .tabla-separada {
    border: 2px solid #333;
    border-collapse: separate;
    border-spacing: 15px 8px;
    width: 80%;
    margin-bottom: 20px;
  }

  .tabla-separada th, .tabla-separada td {
    border: 1px solid #666;
    padding: 10px;
    text-align: center;
  }

  .tabla-colapsada {
    border: 2px solid #333;
    border-collapse: collapse;
    width: 80%;
  }

  .tabla-colapsada th, .tabla-colapsada td {
    border: 1px solid #666;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

  <h2>Tabla con `border-collapse: separate;`</h2>
  <table class="tabla-separada">
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Profesión</th>
    </tr>
    <tr>
      <td>Ana</td>
      <td>28</td>
      <td>Ingeniera</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>35</td>
      <td>Doctor</td>
    </tr>
  </table>

  <h2>Tabla con `border-collapse: collapse;`</h2>
  <table class="tabla-colapsada">
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Profesión</th>
    </tr>
    <tr>
      <td>Elena</td>
      <td>22</td>
      <td>Estudiante</td>
    </tr>
    <tr>
      <td>Javier</td>
      <td>40</td>
      <td>Abogado</td>
    </tr>
  </table>

</body>
</html>

En este ejemplo, se muestran dos tablas idénticas en su estructura HTML, pero con diferentes valores para la propiedad border-collapse. La primera tabla tiene bordes separados con espaciado, mientras que la segunda tiene bordes colapsados formando una cuadrícula continua.

Conclusión

La propiedad border-collapse es fundamental para controlar la apariencia de los bordes en las tablas HTML. Entender la diferencia entre separate y collapse, así como el funcionamiento de border-spacing y la resolución de conflictos, te permitirá estilizar tus tablas de manera precisa y lograr el diseño deseado.