Centrado de tablas con CSS

En HTML hay dos tipos básicos de elementos, los que son bloques y los que no lo son.

Son bloques cosas como <div>, <table>, etc. Es decir, elementos que se pueden considerar como una caja.

No lo son cosas como <p>, etc. Es decir, textos que no son un bloque, sino que "fluyen" y pueden pasar de una línea a otra.

Para el centrado de bloques, en css se usa el estilo "margin:0 auto" (lo importante es el auto). Para el centrado de no bloques se usa "text-align:center".

Sin embargo, el "maligno" nos da problemas. Internet explorer:

• Centra cualquier cosa con "text-align:center"
• No entiende "margin:0 auto"

Para que una tabla (o cualquier otro bloque) nos salga centrada en ambos exploradores, debemos hacer cosas raras:

/* para internet explorer */
.center
{ 
text-align: center;
}
/* para firefox según el standard CSS */
.center table
{ 
margin-left: auto;
margin-right: auto;
text-align: left; /* Para que deje el texto dentro de la tabla hacia la izquierda */
}