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

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

Bordes de los elementos table, tbody, tr y td

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.

En el modo colapsado, Mozilla representa todos los bordes y en los casos en que coinciden varios bordes, dibuja el de mayor 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

Fondos en los elementostable, 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

Márgenes en los elementostable, 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

Autor: Bartolomé Sintes Marco
Última modificación: 15 de noviembre de 2003