Tablas

En esta página se tratan las propiedades que se pueden aplicar a una tabla:

Posición de la leyenda: caption-side
Centrar una tabla
Modos de bordes: border-collapse
Bordes de celdas vacías: empty-cells
Separación entre celdas: border-spacing

Posición de la leyenda: caption-side

La propiedad caption-side permite elegir la posición de la leyenda (<caption>) con respecto a la tabla. Internet Explorer no es capaz de interpretar esta propiedad.

Nota: En la recomendación CSS 2.1 (actualmente -diciembre de 2008- en fase de borrador) se han eliminado los valores right y left. Actualmente (diciembre de 2008) todavía no se ha publicado ningún borrador de la futura recomendación CSS 3: Tablas.

caption { 
  caption-side: top; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

caption { 
  caption-side: bottom; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

caption { 
  caption-side: left; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

caption { 
  caption-side: right; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Volver al índice

Centrar una tabla

Para centrar una tabla horizontalmente en la página, se deben establecer las dos propiedades margin-left y margin-right con el valor auto.

table { 
  margin-left: auto; 
  margin-right: auto; 
}

Esto es la leyenda
Celda 1, con más texto	Celda 2
Celda 3	Celda 4, con más texto

La alineación del contenido de la leyenda se interpreta dentro del espacio que ocupa la leyenda (que coincide con el ancho de la tabla).

table { 
  margin-left: auto; 
  margin-right: auto; 
}

caption { 
  background-color: lightblue; 
  text-align: right; 
}

Esto es la leyenda
Celda 1, con más texto	Celda 2
Celda 3	Celda 4, con más texto

Nota: Internet Explorer 6 no reconocía estas propiedades, como se explica en la página de diferencias IE7 / IE6.

Nota: En Firefox 2, para centrar la leyenda hacía falta establecer también las propiedades margin-left y margin-right para la leyenda, como se explica en la página de diferencias FF3 / FF2.

(Para mirar): Creo haber leido hace tiempo en algún sitio que para centrar una tabla también se podían poner dos valores iguales en las dos propiedades margin-left y margin-right, pero parece que no es cierto:

table { 
  margin-left: 1px; 
  margin-right: 1px; 
}


Celda 1, con más texto	Celda 2
Celda 3	Celda 4, con más texto

Volver al índice

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, tanto Firefox como Internet Explorer aplican el modo separado.

table { 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-collapse: collapse; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-collapse: separate; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

En la página de Modos de bordes de tablas se explican con detalle estos modos de funcionamiento.

Volver al índice

Bordes de celdas vacías: empty-cells

En el modo de bordes separado, la propiedad empty-cells permite establecer si se muestran o no los bordes de las celdas vacías. Internet Explorer no es capaz de interpretar esta propiedad y no muestra nunca los bordes de las celda vacías.

table { 
  empty-cells: show; 
}

Esto es la leyenda
Celda 1
	Celda 4

table { 
  empty-cells: hide; 
}

Esto es la leyenda
Celda 1
	Celda 4

En el modo de bordes colapsado, no se aplica la propiedad empty-cells.

table { 
  border-collapse: collapse;
  empty-cells: hide; 
}

Esto es la leyenda
Celda 1
	Celda 4

Cuando una celda está vacía, Internet Explorer no muestra el borde de la celdas. Como Internet Explorer no admite la propiedad empty-cells, la única manera de que Internet Explorer muestre el borde de una celda es incluir algún espacio en blanco duro (o la entidad de carácter  ) en la celda. En Amaya esos espacios se pueden insertar mediante el atajo de teclado Ctrl+espacio.

<table border="1">
  <tbody>
    <tr>
      <td>Celda 1</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Celda 4</td>
    </tr>
  </tbody>
</table>

Celda 1
	Celda 4

<table border="1">
  <tbody>
    <tr>
      <td>Celda 1</td>
      <td>~</td>
    </tr>
    <tr>
      <td>~</td>
      <td>Celda 4</td>
    </tr>
  </tbody>
</table>

Celda 1
	Celda 4

El problema de incluir espacios en blanco duros para que Internet Explorer muestre el borde de las celdas es que entonces la propiedad empty-cells (que es la que especifica si debe mostrarse o no el borde de las celdas libres) no tiene efecto, ya que la celda no está vacía.

table { 
  empty-cells: hide; 
}

La celda de la derecha no está vacía, tiene un espacio duro
	La celda de la izquierda sí que está vacía

Volver al índice

Separación entre celdas: border-spacing

La propiedad border-spacing permite establecer una separación entre las celdas cuando se utiliza el modo de bordes separado. Se puede escribir un único valor, que se aplicaría a los cuatro lados, o dos valores, que se aplicarían en horizontal (a derecha e izquierda) y en vertical (arriba y abajo), respectivamente. Internet Explorer no es capaz de interpretar esta propiedad. Ni Firefox ni Internet Explorer aplican la propiedad cuando el modo de bordes es colapsado.

table { 
  border-collapse: collapse; 
  border-spacing: 20px; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-collapse: separate; 
  border-spacing: 20px; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-collapse: separate; 
  border-spacing: 30px 10px; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Volver al índice

Autor: Bartolomé Sintes Marco
Última modificación: 13 de diciembre de 2008