en Diseño web

Centrando Tablas con CSS

Hoy en el trabajo, tenía que crear una sencilla página HTML que contenía tablas y estas tenían que estar centradas en la página.

Quería hacerlo en CSS, más que nada para no mezclar el contenido con la presentación. Creía que la cosa sería un momento y me he puesto manos a la obra:

1. He añadido a un fichero CSS la siguiente definición:

div.centrado{
text-align: center;
}

2. En mi fichero HTML he añadido:

<div class=»centrado»><table>…</table></div>

y, para mi sorpresa, solo me centraba la tabla Internet Explorer. Ni Firefox ni Netscape han centrado la tabla. Entonces, he buscado a través de Google cual era mi fallo estrepitoso (je je) y me he encontrado con un artículo en inglés sobre como centrar tablas con CSS.

De todas las soluciones que ofrece me he quedado con la siguiente:

div.centrado{
text-align: center;
}
div.centrado table {
margin: 0 auto;
text-align: left;
}

que ha centrado mi tabla tanto en Internet Explorer como en Firefox y Netscape. Además el artículo comenta que de esta manera también se centran las tablas para el resto de navegadores (hay un caso puntual que no se centra en el Internet Explorer de los Mac). Me ha parecido la mejor solución de todas las que en ese artículo se comentan.

Espero que a alguno os sirva de solución por si os encontrais con el mismo problema.

Escribe un comentario

Comentario

27 Comentarios

  1. ¡Gracias! Llevaba una semana buscando esta información. Lo malo es que la página de theodorakis no funciona, pero con lo que has resumido me ha servido 😉

  2. deje de andar en andadera (deje mi keygenerator o generador de codigo) y me puse a caminar (nada mas que un editor de textos) y este tema me tenia loco desde hace un rato… gracias, esta bueno… que por que deje mi keygen??? es sencillo, no hacia la maquetacion de la forma en que queria, es decir mostraba el contenido tal y como yo queria, pero no usaba mas que div’s y no me gusto eso… pero bueno. lo siguire usando por que trae cosas utiles como por ejemplo te genra un low resolution de la imagen que quieras… trae el ftp que me gusta usar y cosas asi, pero desde ahora solo yo pongo el codigo… a mano.

  3. perfecto el centrado de la tabla, el problema que tengo es que estoy metiendo swf a la plantilla centrada y me cuadra bien pero al momento de ver la prueba en ie se corre a otro lado, mejor dicho no queda en el sitio q lo coloque

  4. Hola, muchas gracias por la información me fue de muchísima ayuda. Llevaba todo el día intentando solucionar este problema. Muchísimas Gracias.

  5. uhh gracias muy bueno me solucionooo la vida… gracias grande

    La paz

  6. Muchas Gracias, ya me estaba frustrando, por que centraba la tabla y se desorganizaban todo lo demás (fotos, formularios, etc..).

    Te agradezco mucho por el código que me llego de perlas.

  7. muchísimas gracias por la aportación, llevaba unos días buscando la solución y no era capaz. Gracias