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 estilos de bordes
• 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>

En ambos modos, Internet Explorer solamente representa el borde de la tabla (<table>), que rodea completamente la tabla, y el borde de las casillas (<td>). 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.

En el modo colapsado, Mozilla representa todos los bordes y en los casos en que coinciden varios bordes, dibuja el de mayor grosor (o el más interior, si son del mismo grosor). El borde exterior de la tabla está definido por el borde de mayor grosor. El color del borde de tabla se aplica a los bordes de las celdas.

En el modo separado, Mozilla representa solamente los bordes de la tabla (<table>) y de las casillas (<td>)

		En cada columna se aplica únicamente la propiedad indicada en la casilla superior
		table { border: red 5px solid; }	tbody { border: blue 5px solid; }	tr { border: green 5px solid; }	td { border: pink 5px solid; }
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 { border: red 5px solid; }	+ tbody { border: blue 6px solid; }	+ tr { border: green 7px solid; }	+ td { border: pink 9px solid; }
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 { border: red 5px solid; }	+ tbody { border: blue 5px solid; }	+ tr { border: green 5px solid; }	+ td { border: pink 5px solid; }
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

Estilos de bordes

Por escribir

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: pink 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: pink 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 { border: 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