jueves, 20 de noviembre de 2014

Tablas: Bordes margenes y rellenos

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, los navegadores aplican el modo separado.
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
table { 
}
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
table { 
  border-collapse: separate; 
}
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Correcto en FirefoxCorrecto en Internet ExplorerCorrecto en Chrome
table { 
  border-collapse: collapse; 
}
Leyenda
Celda 1Celda 2
Celda 3Celda 4

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

En el modo separado, los navegadores representan únicamente el borde de la tabla (<table>) y el borde de las celdas (<td>).
En el modo colapsado, los navegadores representan los bordes de todos los elementos: la tabla (<table>), los cuerpos de tabla (<tbody>), las filas (<tr>) y las celdas (<td>).
Nota: Tanto en modo separado como colapsado, Chrome muestra el borde de las celdas del color definido para <table>, <tbody> y <tr>, pero sin aplicar el grosor.
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
En el modo colapsado, si en una misma tabla hay bordes de elementos distintos que se superponen, los navegadores dibujan el de mayor grosor (o el más interior, si son del mismo grosor).
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
table {
  border: red 3px solid;}
+tbody {
  border: blue 5px solid;}
+tr {
  border: green 7px solid;}
+td {
  border: orange 9px solid;}
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
table {
  border: red 9px solid;}
+tbody {
  border: blue 7px solid;}
+tr {
  border: green 5px solid;}
+td {
  border: orange 3px solid;}
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4

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

En el modo separado, los navegadores representan el margin y el padding de la tabla (<table>) y el padding de las celdas (<td>).
En el modo colapsado, los navegadores representan únicamente el margin de la tabla (<table>) y el padding de las celdas (<td>).
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4

Fondos en los elementos <table>, <tbody>, <tr> y <td>

En ambos modos (colapsado y separado), los navegadores 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.
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Celda 1Celda 2
Celda 3Celda 4

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

En el modo separado, los navegadores representan el borde de la leyenda (<caption>) de la misma manera.
En el modo colapsado, los navegadores representan el borde de la leyenda (<caption>) de la misma manera.
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
En ambos modos (separado y colapsado), los navegadores representan el margin y el padding de la leyenda (<caption>).
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
En ambos modos (separado y colapsado), los navegadores representan el fondo de la leyenda (<caption>).
Correcto en Firefox Correcto en Internet Explorer Correcto en ChromeEn 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 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
collapse
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4
Leyenda
Celda 1Celda 2
Celda 3Celda 4

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

los navegadores representan los bordes de las etiquetas <col /> y <colgroup>.
Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
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 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
<colgroup>
  <col /><col />
</colgroup>
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
<colgroup>
  <col span="2" />
</colgroup>
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Esto es la leyenda
Celda 1Celda 2Celda 3
Celda 4Celda 5Celda 6
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)