Modos de bordes en la tablas

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

• qué modos de bordes existen
• cómo se muestran los bordes en cada uno de los modos
• cómo se muestran los fondos en cada uno de los modos
• cómo se muestran los márgenes en cada uno de los modos
• cómo se muestran los bordes, fondos y márgenes de la leyenda en cada uno de los modos

Modos de bordes

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.

Mozilla 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, Mozilla 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
	collapse	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
	collapse	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 Mozilla 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>).

Mozilla 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

		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