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 😉

Comment publicado el 7 enero 2006 04:46 pm

Me alegro de que te haya servido Paul! 😉

Un saludo!

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

Me parece un buen articulo, me aclaro muchas dudas gracias

Comment 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.

Comment 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

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

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

Comment publicado el 29 febrero 2008 04:30 pm

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

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

Gracias!

Me ha ayudado en verdad!

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

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

Comment publicado el 27 julio 2009 05:09 pm

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

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

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

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

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

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

Muy bueno!!!!
Muchas Gracias!.

Comment publicado el 25 enero 2010 12:53 am

Muy escueto y resumido… muy bien ^^

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

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

Comment 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.

Comment publicado el 13 mayo 2010 11:21 pm

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

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

uhh gracias muy bueno me solucionooo la vida… gracias grande

La paz

Comment publicado el 23 marzo 2011 04:15 pm

Muchas gracias

Comment publicado el 13 julio 2011 07:15 am

Gracias por pasar el dato.

Comment 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.

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

Gracias por compartir tus conocimientos

Comment 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

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

gracias felizmente encontre este post a tiempo.

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

Gracias machin!!

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

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

Comment publicado el 18 septiembre 2012 09:27 pm

Muchas gracias! Bueno, bonito, barato!

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

Suscripción

Últimos comentarios

Categorías

Cifras

  • 725 artículos
  • 2,582 comentarios
  • 1,080 usuarios
  • 67 enlaces