Imagen Header Un Blog Mas Jordi Abad

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.


27 Comentarios por lo menos ...

¡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 ;-)

Comentario publicado el 7 enero 2006 04:46 pm

Me alegro de que te haya servido Paul! ;)

Un saludo!

Comentario publicado el 7 enero 2006 04:55 pm
3. Adry

Me parece un buen articulo, me aclaro muchas dudas gracias

Comentario publicado el 29 marzo 2006 05:02 am
4. buzu

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.

Comentario publicado el 25 septiembre 2006 12:24 am
5. felipe

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

Comentario publicado el 1 noviembre 2007 08:04 pm
6. nenita*

ola genial era justo lo q buscaba gracias por publicarlo
:)
Me sirvio muxo!!

Comentario publicado el 29 febrero 2008 04:30 pm

Excelente, tenía que hacer lo mismo y tu ayuda me ayudó mucho.
Un abrazo!

Comentario publicado el 2 marzo 2008 09:29 pm
8. Oscar

Gracias!

Me ha ayudado en verdad!

Comentario publicado el 3 marzo 2008 10:23 am
9. Lus

Lo correcto es…en el archivo css etiqueta table {margin: auto;}

Comentario publicado el 27 julio 2009 05:09 pm

Gracias muy bueno fuiste lo primero y lo mejor ke encontre googleando

Comentario publicado el 6 septiembre 2009 12:44 am
11. claudio

buenisimo el articulo gracias era justo lo q estaba buscando.se agradece

Comentario publicado el 9 septiembre 2009 06:29 am
12. ferbere

Sencillo y efectivo. Muchas gracias, me ahorraste horas de seguir buscando.

Comentario publicado el 13 noviembre 2009 09:29 am
13. Mario

Muy bueno!!!!
Muchas Gracias!.

Comentario publicado el 25 enero 2010 12:53 am

Muy escueto y resumido… muy bien ^^

Comentario publicado el 21 marzo 2010 02:52 am
15. Ivan vaca

Gracias me tenía loco este problema una solución Excelente.

Comentario publicado el 7 abril 2010 03:51 pm
16. jcsh

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.

Comentario publicado el 13 mayo 2010 11:21 pm

Tiene razón.
lo mejor es en la css
table {margin: auto;}

Comentario publicado el 26 junio 2010 06:29 am
18. martin mascareño

uhh gracias muy bueno me solucionooo la vida… gracias grande

La paz

Comentario publicado el 23 marzo 2011 04:15 pm

Muchas gracias

Comentario publicado el 13 julio 2011 07:15 am

Gracias por pasar el dato.

Comentario publicado el 25 julio 2011 02:26 am
21. Yamid Vallejo

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.

Comentario publicado el 7 octubre 2011 06:59 pm
22. José Cardozo

Gracias por compartir tus conocimientos

Comentario publicado el 20 enero 2012 02:51 am
23. Mónica

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

Comentario publicado el 17 febrero 2012 07:19 pm
24. black

gracias felizmente encontre este post a tiempo.

Comentario publicado el 8 marzo 2012 05:36 pm
25. Diego

Gracias machin!!

Comentario publicado el 25 agosto 2012 01:01 am
26. Tony

Gracias por el Tip men, me fue de gran utilidad.

Comentario publicado el 18 septiembre 2012 09:27 pm

Muchas gracias! Bueno, bonito, barato!

Comentario publicado el 15 marzo 2013 02:20 pm
(required)
(will not be published) (required)
(opitional)

Suscripción

Categorías

Cifras

  • 725 artículos
  • 2,560 comentarios
  • 1,061 usuarios
  • 67 enlaces