Cuando tenemos una tabla dentro de un texto, muchas veces nos parece lo más bonito de colocarla centrada. Sin embargo, hay una diferencia entre navegadores a la hora de colocar una tabla en el centro de la línea. No es posible conseguirlo únicamente con atributos de estilo. Es necesario especificar el atributo align de la tabla.

El siguiente código es una tabla dentro un elemento DIV con alineamiento centrado:

<div style="border: 1pt solid #fbb; text-align: center;">
	Una tabla con una celda
	<table border="1">
		<tr>
			<td>Una celda</td>
		</tr>
	</table>
</div>

Esto aparece en el navegador así:

Una tabla con una celda 

Una celda

Si tienes abierto este artículo en Mozilla Firefox o Opera, entonces la tabla se encuentra alineado a la izquierda. Si lo tienes abierto en Internet Explorer, entonces la tabla se encuentra centrada – aunque no dentro de este artículo (el autor de CSS de WordPress sabrá como). Hay que copiar el código en un fichero HTML vacío para ver este efecto.

Para poder centrar la tabla en los otros navegadores, es imprescindible de usar el atributo align:

<div style="border: 1pt solid #bfb;">
	Otra tabla con una celda
	<table border="1" align="center">
		<tr>
			<td>Una celda</td>
		</tr>
	</table>
</div>

El navegador muestra este código así:

Otra tabla con una celda 

Una celda

Esta representación aparece con el mismo alineamiento en todos los navegadores.

Referencias

About these ads