# Modos de bordes en la tablas

En esta lección aprenderás las particularidades de los modos de bordes de las tablas:

## Modos de bordes: border-collapse

Las tablas tienen dos modos de presentación de los bordes que se selecciona con la propiedad border-collapse: separado (separate) y colapsado (collapse). En el modo separado existe un hueco entre los bordes de cada casilla, mientras que en el modo colapsado los bordes se superponen. Si no estableces el modo de presentación, ambos navegadores aplican el modo separado.

| table { } |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
| table { border-collapse: collapse; } |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
| table { border-collapse: separate; } |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Volver al índice

## Bordes de los elementos <table>, <tbody>, <tr> y <td>

Tanto en el modo colapsado como en el separado e independientemente del grosor de los bordes, Internet Explorer solamente representa el borde de la tabla (<table>), que rodea completamente la tabla, y el borde de las casillas (<td>). La única diferencia es que en el modo colapsado, el borde exterior de la tabla está definido por el borde de la tabla, no por el borde de las casillas.

Firefox sí que distingue ambos modos. En el modo separado, representa solamente los bordes de la tabla (<table>) y de las casillas (<td>), pero en el modo colapsado representa también los bordes de las filas (<tr>) y de los cuerpos de tabla (<tbody>) y el color del borde de la tabla se aplica a los bordes de las celdas.

| En cada columna se aplica únicamente la propiedad indicada en la casilla superior
table { border: red 5px solid; } | tbody { border: blue 5px dotted; } | tr { border: green 5px dashed; } | td { border: #CC9933 5px double; }
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Si en una misma tabla en modo colapsado hay bordes de elementos distintos que se superponen, Firefox dibuja el de mayor grosor (o el más interior, si son del mismo grosor). El color del borde de la tabla se aplica a los bordes de las celdas.

| En cada columna se aplica la propiedad indicada en la casilla superior y las anteriores.
border- collapse | collapse | table { border: red 5px solid; } | + tbody { border: blue 5px dotted; } | + tr { border: green 5px dashed; } | + td { border: #CC9933 5px double; }
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
table { border: red 3px solid; } | + tbody { border: blue 5px dotted; } | + tr { border: green 7px dashed; } | + td { border: #CC9933 9px double; }
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
table { border: red 9px solid; } | + tbody { border: blue 7px dotted; } | + tr { border: green 5px dashed; } | + td { border: #CC9933 3px double; }
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate | table { border: red 5px solid; } | + tbody { border: blue 5px dotted; } | + tr { border: green 5px dashed; } | + td { border: #CC9933 5px double; }
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Por escribir qué pasa con las columnas

Internet Explorer no admite bordes en las etiquetas <col /> o <colgroup>.

Volver al índice

## Fondos en los elementos <table>, <tbody>, <tr> y <td>

Tanto Firefox como Internet Explorer representan los fondos de los elementos <table>, <tbody>, <tr> y <td>. Lógicamente, el fondo de la casilla tiene prioridad sobre el fonde la fila y así sucesivamente.

| En cada columna se aplica únicamente la propiedad indicada en la casilla superior
table { background-image: url("rojo.png"; } | tbody { background-image: url("azul.png"; } | tr { background-image: url("verde.png"; } | td { background-image: url("gris.png"; }
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

| En cada columna se aplica la propiedad indicada en la casilla superior y las anteriores.
table { background-image: url("rojo.png"; } | + tbody { background-image: url("azul.png"; } | + tr { background-image: url("verde.png"; } | + td { background-image: url("gris.png"; }
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Volver al índice

## Márgenes en los elementos <table>, <tbody>, <tr> y <td>

Internet Explorer solamente representa el margin de la tabla completa (<table>) y el padding de la casilla (<td>).

Firefox representa el margin y el padding de la tabla completa (<table>) y el padding de la casilla (<td>).

| En cada columna se aplica únicamente la propiedad indicada en la casilla superior
table { margin: 15px; padding: 15px; } | tbody { margin: 15px; padding: 15px;} | tr { margin: 15px; padding: 15px;} | td { margin: 15px; padding: 15px;}
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

| En cada columna se aplica la propiedad indicada en la casilla superior y las anteriores.
table { margin: 15px; padding: 15px; } | +tbody { margin: 15px; padding: 15px;} | +tr { margin: 15px; padding: 15px;} | +td { margin: 15px; padding: 15px;}
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Volver al índice

## Bordes, fondos y márgenes de la leyenda (<caption>)

| En cada columna se aplica únicamente la propiedad indicada en la casilla superior, además de caption { border: black 5px solid; }
table { border: red 5px solid; } | tbody { border: blue 5px solid; } | tr { border: green 5px solid; } | td { border: #CC9933 5px solid; }
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

| En cada columna se aplica la propiedad indicada en la casilla superior y las anteriores, además de caption { border: black 10px solid; }
table { border: red 5px solid; } | + tbody { border: blue 6px solid; } | + tr { border: green 7px solid; } | + td { border: #CC9933 9px solid; }
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

| En cada columna se aplica únicamente la propiedad indicada en la casilla superior, además de caption { background-color: lightyellow; }
table { background-image: url("rojo.png"; } | tbody { background-image: url("azul.png"; } | tr { background-image: url("verde.png"; } | td { background-image: url("gris.png"; }
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

| En cada columna se aplica únicamente la propiedad indicada en la casilla superior, además de caption { border: background-color: lightyellow; margin: 15px; padding: 15px; }
table { margin: 15px; padding: 15px; } | tbody { margin: 15px; padding: 15px;} | tr { margin: 15px; padding: 15px;} | td { margin: 15px; padding: 15px;}
border- collapse | collapse |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
separate |
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4
Esto es la leyenda
Casilla 1 | Casilla 2
Casilla 3 | Casilla 4

Volver al índice