Bordes, márgenes y fondos en las tablas

En esta página se tratan las particularidades de los bordes, márgenes y fondos 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: separate; }	Leyenda Celda 1 Celda 2 Celda 3 Celda 4
	table { border-collapse: collapse; }	Leyenda Celda 1 Celda 2 Celda 3 Celda 4

Nota: En Firefox, si en una página hay varias tablas y la primera table está en modo colapsado, las tablas siguientes pierden los bordes de las casillas, como se comenta en la página de bugs de Firefox.

Volver al principio de la página

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 representan los bordes de todos los elementos: 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 solid; }	tr { border: green 5px solid; }	td { border: orange 5px solid; }
border- collapse	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
	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

Nota: En el modo colapsado, Firefox aplica el color del borde de la tabla a los bordes de las celdas, pero Internet Explorer no, como se comenta en la página de diferencias entre Firefox e Internet Explorer.

Nota: En el modo colapsado, Internet Explorer 8 aplica bordes a los elementos <table>, <tbody>, <tr> y <td>, pero Internet Explorer 7 sólo lo aplicaba a <table> y <td>, como se comenta en la página de diferencias entre IE8 e IE7.

En el modo colapsado, si en una misma tabla hay bordes de elementos distintos que se superponen, Firefox e Internet Explorer dibujan el de mayor grosor (o el más interior, si son del mismo grosor).

	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 solid; }	+ tr { border: green 5px solid; }	+ td { border: orange 5px solid; }
	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 solid; }	+ tr { border: green 7px solid; }	+ td { border: orange 9px solid; }
	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 solid; }	+ tr { border: green 5px solid; }	+ td { border: orange 3px solid; }
	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

Nota: Internet Explorer 8 dibuja el de mayor grosor (o el más interior, si son del mismo grosor), pero Internet Explorer 7 no lo hacía, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

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 representan 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	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
	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

		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	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
	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

Nota: En el modo separado, Internet Explorer 8 aplica el padding del elemento <table>, pero Internet Explorer 7 no lo hacía, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

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: red; }	tbody { background: blue; }	tr { background: green; }	td { background: orange; }
border- collapse	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
	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

		En cada columna se aplica la propiedad indicada en la celda superior y las anteriores.
		table { background: red; }	+ tbody { background: blue; }	+ tr { background: green; }	+ td { background: orange; }
border- collapse	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
	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

Volver al principio de la página

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

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

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

Nota: En el modo colapsado, Firefox solapa el borde inferior de la leyenda con el borde superior de la tabla, mientras que Internet Explorer 8 los mantiene separados (sin distancia entre ellos), como se comenta en la página de diferencias entre Firefox e Internet Explorer.

		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: orange 5px solid; }
border- collapse	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
	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

		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: orange 9px solid; }
border- collapse	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
	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

Nota: En el modo colapsado, Internet Explorer 8 representa todos los bordes de la leyenda (<caption>), pero Internet Explorer 7 no representaba el borde inferior, como se comenta en la página de diferencias entre IE8 e IE7.

En ambos modos (separado y colapsado), Firefox e Internet Explorer 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 { 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	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
	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

Nota: En ambos modos (separado y colapsado), Internet Explorer 8 representa el margin y el padding de la leyenda (<caption>), pero Internet Explorer 7 representaba únicamente el padding de la leyenda (<caption>), como se comenta en la página de diferencias entre IE8 e IE7.

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: red; }	tbody { background: blue; }	tr { background: green; }	td { background: orange; }
border- collapse	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
	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

Volver al principio de la página

Bordes de los elementos <col /> y <colgroup>

Firefox e Internet Explorer representan los bordes de las etiquetas <col /> y <colgroup>.

	colgroup { border: 5px black solid; }	col { border: 5px red solid; }	colgroup { border: 5px black solid; } col { border: 5px red solid; }	colgroup { border: 7px black solid; } col { border: 5px red solid; }
... <colgroup span="2"> </colgroup> ... ...	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6
<colgroup> <col /><col /> </colgroup> ...	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6
<colgroup> <col span="2" /> </colgroup> ...	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6	Esto es la leyenda Celda 1 Celda 2 Celda 3 Celda 4 Celda 5 Celda 6

Nota: Internet Explorer 8 representa los bordes de las etiquetas <col /> y <colgroup>, pero Internet Explorer 7 no lo hacía, como se comenta en la página de diferencias entre IE8 e IE7.

Faltan márgenes y fondos de <col /> y <colgroup>, así como comparar el modo colapsado y el separado.

Volver al principio de la página