Definición | Selecciona el modelo de bordes de las celdas de la tabla |
---|---|
Valores permitidos | Uno y sólo uno de los siguientes valores:
|
Valor inicial | separate |
Se aplica a | Los elementos de tipo tabla |
Válida en | medios visuales |
Se hereda | si |
Definición en el estándar | http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse |
El estándar de CSS 2.1 establece que existen dos modelos de bordes para las celdas de las tablas. El primer modelo es el "separado" (separate) y hace que todas las celdas de la tabla muestren sus cuatro bordes. El segundo modelo es el "fusionado" (collapse) y combina los bordes de las celdas adyacentes.
El modelo de bordes influye en la estética de los bordes de las celdas, pero es independiente de las propiedades border
, border-width
, border-color
y border-style
. El modelo de bordes se establece mediante la propiedad border-collapse
.
Los navegadores utilizan por defecto el modelo de bordes separate
, que hace que todas las celdas estén separadas y muestren siempre sus cuatro bordes. La tabla del siguiente ejemplo emplea el modelo separate
:
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 |
A continuación se muestra el código CSS correspondiente a la tabla anterior:
table { border-collapse: separate; border-spacing: 3px; }
Casi siempre que se utiliza la propiedad border-collapse: separate
, también se emplea la propiedad border-spacing para controlar la separación entre las celdas.
En el modelo de bordes separados, todas las celdas muestran siempre sus cuatro bordes, independientemente de la separación entre las celdas. En el siguiente ejemplo se utiliza el modelo de bordes separados y se reduce la separación a 0px
:
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 |
El aspecto final de la tabla anterior puede que no sea el deseado, porque los bordes de las celdas adyacentes se muestran como un borde de grosor doble, ya que en realidad son dos bordes iguales sin separación entre ellos.
El otro modelo de bordes disponible se denomina collapse
y consiste en la fusión automática de todos los bordes adyacentes. A continuación se muestra la misma tabla del ejemplo anterior pero utilizando el modelo collapse
:
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 |
La otra gran diferencia entre los dos modelos de bordes es que en el modelo separate
las filas, grupos de filas, columnas y grupos de columnas no pueden establecer bordes.
A continuación se muestran dos tablas idénticas que utilizan diferentes modelos de bordes:
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 |
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 dos tablas del ejemplo anterior establecen los mismos bordes en todas sus filas. Sin embargo, como la primera tabla utiliza el modelo de bordes separate
, los navegadores ignoran todos los bordes de sus filas.
Cuando todos los bordes son exactamente iguales, la fusión de los bordes adyacentes es trivial, ya que consiste en mostrar únicamente uno de los dos bordes existentes en la intersección de las dos celdas. Por lo tanto, en realidad cada celda sólo muestra medio borde.
Sin embargo, cuando los bordes adyacentes tienen diferentes estilos y grosores, el navegador debe determinar cuál de los dos bordes debe ser representado. El estándar de CSS 2.1 define de forma precisa el algoritmo que se sigue para determinar el borde ganador:
border-style: hidden
tienen la máxima prioridad. Los bordes con este estilo eliminan cualquier otro borde adyacente y por tanto, no se muestra ningún borde.border-style: none
tienen la mínima prioridad. Sólo se oculta este borde si todos los demás bordes adyacentes también tienen un estilo none
.hidden
y al menos uno de ellos no es none
, siempre gana el borde más ancho.double
, solid
, dashed
, dotted
, ridge
, outset
, groove
, inset
.ltr
).A continuación se muestra un ejemplo complejo de resolución de conflictos al fusionar bordes muy diferentes:
Celda 1 - 1 | Celda 1 - 2 | |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
Si el navegador que utilizas para ver esta página sigue correctamente los estándares, el aspecto de la tabla anterior debe ser exactamente como el de la siguiente imagen:
A continuación se muestra el código HTML y CSS del ejemplo anterior:
<table style="border: thick solid red; border-collapse: collapse;" summary="Descripción de la tabla y su contenido"> <tbody> <tr style="border: medium dashed black"> <td style="border: double blue">Celda 1 - 1</td> <td style="border: solid green">Celda 1 - 2</td> <td style="border: hidden">Celda 1 - 3</td> </tr> <tr> <td style="border: medium solid blue">Celda 2 - 1</td> <td style="border: medium solid green">Celda 2 - 2</td> <td>Celda 2 - 3</td> </tr> <tr style="border: dashed black"> <td>Celda 3 - 1</td> <td style="border: medium dotted">Celda 3 - 2</td> <td>Celda 3 - 3</td> </tr> </tbody> </table>
Por último, existen tres estilos de borde que tienen un significado especial cuando se utilizan en las tablas:
hidden
, visualmente es idéntico a none
, pero si se utiliza el modelo de bordes collapse
, tiene la máxima prioridad e impide que se vea cualquier otro borde adyacente.inset
, en el modelo de bordes collapse
se visualiza igual que el estilo ridge
.outset
, en el modelo de bordes collapse
se visualiza igual que el estilo groove
.