Modos de bordes en la tablas

En esta página se tratan 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 celda, mientras que en el modo colapsado los bordes se superponen. Si no se establece el modo de presentación, Firefox e Internet Explorer aplican el modo separado.

	table { }	Leyenda Celda 1 Celda 2 Celda 3 Celda 4
	table { border-collapse: collapse; }	Leyenda Celda 1 Celda 2 Celda 3 Celda 4
	table { border-collapse: separate; }	Leyenda Celda 1 Celda 2 Celda 3 Celda 4

Volver al índice

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

En el modo separado, Firefox e Internet Explorer representan únicamente el borde de la tabla (<table>) y el borde de las celdas (<td>).

En el modo colapsado, Firefox e Internet Explorer se comportan de manera distinta:

• Internet Explorer solamente representa el borde de la tabla (<table>) y el borde de las celdas (<td>), como en el modo separado. 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 celdas.
• Firefox representa los bordes de todos los elmentos: la tabla (<table>), los cuerpos de tabla (<tbody>), las filas (<tr>) y las celdas (<td>).

		En cada columna se aplica únicamente la propiedad indicada en la celda superior
		table { border: red 5px solid; }	tbody { border: blue 5px dotted; }	tr { border: green 5px dashed; }	td { border: #CC9933 5px double; }
border- collapse	collapse	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 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). Además, 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 celda 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; }
		Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
		table { border: red 3px solid; }	+ tbody { border: blue 5px dotted; }	+ tr { border: green 7px dashed; }	+ td { border: #CC9933 9px double; }
		Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
		table { border: red 9px solid; }	+ tbody { border: blue 7px dotted; }	+ tr { border: green 5px dashed; }	+ td { border: #CC9933 3px double; }
		Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
	separate	table { border: red 5px solid; }	+ tbody { border: blue 5px dotted; }	+ tr { border: green 5px dashed; }	+ td { border: #CC9933 5px double; }
		Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 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>

En ambos modos (colapsado y separado), Firefox e Internet Explorer representan los fondos de los elementos <table>, <tbody>, <tr> y <td>. Lógicamente, el fondo de la celda tiene prioridad sobre el fondo de la fila y así sucesivamente.

		En cada columna se aplica únicamente la propiedad indicada en la celda 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	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4

		En cada columna se aplica la propiedad indicada en la celda 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	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4

Volver al índice

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

En el modo colapsado, Firefox e Internet Explorer representan únicamente el margin de la tabla (<table>) y el padding de las celdas (<td>).

En el modo separado, Firefox e Internet Explorer se comportan de manera distinta:

• Internet Explorer representa únicamente el margin de la tabla (<table>) y el padding de las celdas (<td>), como en el modo colapsado.
• Firefox representa el margin y el padding de la tabla (<table>) y el padding de las celdas (<td>).

		En cada columna se aplica únicamente la propiedad indicada en la celda superior
		table { margin: 15px; padding: 15px; }	tbody { margin: 15px; padding: 15px;}	tr { margin: 15px; padding: 15px;}	td { margin: 15px; padding: 15px;}
border- collapse	collapse	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4

		En cada columna se aplica la propiedad indicada en la celda 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	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 1 Celda 2 Celda 3 Celda 4

Volver al índice

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

En el modo separado, Firefox e Internet Explorer representan el borde la leyenda (<caption>) de la misma manera.

En el modo colapsado, Firefox e Internet Explorer se comportan de manera distinta:

• Internet Explorer solamente representa tres lados del borde de la leyenda (<caption>), todos menos el de abajo.
• Firefox representa todos los bordes de la leyenda (<caption>), que se superponen parcialmente con los bordes de los demás elementos.

		En cada columna se aplica únicamente la propiedad indicada en la celda 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	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4

		En cada columna se aplica la propiedad indicada en la celda 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	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4

En ambos modos (separado y colapsado), Firefox e Internet Explorer representan el fondo de la leyenda (<caption>).

		En cada columna se aplica únicamente la propiedad indicada en la celda superior, además de caption { background-color: orange; }
		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	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4

En ambos modos (separado y colapsado), Internet Explorer representa únicamente el padding de la leyenda (<caption>).

En ambos modos (separado y colapsado), Firefox representa el margin y el padding de la leyenda (<caption>).

		En cada columna se aplica únicamente la propiedad indicada en la celda superior, además de caption { border: background-color: orange; 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	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4
	separate	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4	Leyenda Celda 1 Celda 2 Celda 3 Celda 4

Volver al índice