Antes que nada, esta manera de centrar una tabla dentro de una página ha quedado descontinuada:

<table align="center">

Los navegadores todavía lo soportan, pero la mejor manera de centrar una tabla es con hojas de estilos (CSS).

Te habrás dado cuenta de que si usas el siguiente código:

<div style="text-align:center">
  <table border="1" width="150">
    <tr>
      <td> Hola </td>
    </tr>
  </table>
</div>

la tabla se centra, pero también se centra todo su contenido!

Centrar tablas

Bueno, la manera de resolver esto es así:

Crea esta definición en tu hoja de estilos:

.TablaPrincipal
{
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

Y ahora aplícasela a tu tabla:

<table class="TablaPrincipal">
  <tr>
    <td> Hola </td>
  </tr>
</table>

Se centra la tabla con respecto a la página, pero el texto dentro de la tabla no se centra.

Centrado de Tabla con CSS

¿Por qué?
Si te preguntas por qué ocurre esto, tendrías que referirte a esta sección de la especificación de las hojas de estilo, que dice:

If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

En español:

Si ‘margin-left’ y ‘margin-right’ se establecen a ‘auto’, los valores utilizados son iguales. Esto centra horizontalmente el elemento con respecto a los bordes del bloque contenedor.

Publicada en Web

Un comentario sobre “Como centrar una tabla con hojas de estilos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


tres + = 9