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.
No existen artículos relacionados.
13 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 pmMe alegro de que te haya servido Paul!
Un saludo!
Comentario publicado el 7 Enero 2006 04:55 pmMe parece un buen articulo, me aclaro muchas dudas gracias
Comentario publicado el 29 Marzo 2006 05:02 amdeje 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 amperfecto 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 pmola genial era justo lo q buscaba gracias por publicarlo
Comentario publicado el 29 Febrero 2008 04:30 pmMe sirvio muxo!!
Excelente, tenía que hacer lo mismo y tu ayuda me ayudó mucho.
Comentario publicado el 2 Marzo 2008 09:29 pmUn abrazo!
Gracias!
Me ha ayudado en verdad!
Comentario publicado el 3 Marzo 2008 10:23 amLo correcto es…en el archivo css etiqueta table {margin: auto;}
Comentario publicado el 27 Julio 2009 05:09 pmGracias muy bueno fuiste lo primero y lo mejor ke encontre googleando
Comentario publicado el 6 Septiembre 2009 12:44 ambuenisimo el articulo gracias era justo lo q estaba buscando.se agradece
Comentario publicado el 9 Septiembre 2009 06:29 amSencillo y efectivo. Muchas gracias, me ahorraste horas de seguir buscando.
Comentario publicado el 13 Noviembre 2009 09:29 amMuy bueno!!!!
Comentario publicado el 25 Enero 2010 12:53 amMuchas Gracias!.