Forma CSS para alinear horizontalmente la tabla

StackOverflow https://stackoverflow.com/questions/301147

Pregunta

Quiero mostrar una tabla de ancho fijo en el centro de la ventana del navegador. Ahora uso 

<table width="200" align="center">

Pero Visual Studio 2008 da advertencia en esta línea:

El atributo 'alinear' se considera obsoleto. Se recomienda una construcción más nueva.

¿Qué estilo CSS debo aplicar a la tabla para obtener el mismo diseño?

¿Fue útil?

Solución

Steven tiene razón, en teoría :

  

el & # 8220; correcto & # 8221; manera de centrar una tabla usando CSS. Los navegadores conformes deberían centrar las tablas si los márgenes izquierdo y derecho son iguales. La forma más sencilla de lograr esto es establecer los márgenes izquierdo y derecho en & # 8220; auto. & # 8221; Por lo tanto, uno podría escribir en una hoja de estilo: 

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Pero el artículo mencionado al comienzo de esta respuesta le ofrece la otra forma de centrar una tabla.

  

Una elegante solución de navegador cruzado css:   Esto funciona tanto en MSIE 6 (Quirks y estándares), Mozilla, Opera e incluso Netscape 4.x sin establecer ningún ancho explícito: 

div.centered 
{
    text-align: center;
}

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


<div class="centered">
    <table>
    …
    </table>
</div>

Otros consejos

Prueba esto: 

<table width="200" style="margin-left:auto;margin-right:auto">

Simple. IE6 y superior felizmente centrarán su mesa con & Quot; margin: 0 auto; & Quot; si solo la página se muestra en " standards " modo. Para que esto suceda, necesita una declaración de doctype válida, como 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

o 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Verdadero, IE5.5 y versiones posteriores aún se negarán a centrar la tabla, pero tal vez pueda vivir con eso, especialmente si la página sigue funcionando con la tabla alineada a la izquierda. Creo que ahora los usuarios de IE5.5 y versiones anteriores están bastante acostumbrados a algunos sitios web de aspecto extraño, pero aún así debe asegurarse de que esas fallas visuales no inutilicen su sitio.

¡Feliz codificación!

EDITAR: Lo siento, quizás debería señalar que no tiene que tener un & "; estricto &"; doctype para obtener IE6 y subir a " standards " modo de renderizado Me di cuenta de que podría parecer así por los ejemplos de doctype que publiqué anteriormente. Por ejemplo, esta declaración de doctype funcionará igualmente: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Aunque podría ser una herejía en el mundo de hoy, en el pasado usted haría el siguiente código que no es CSS. Esto funciona en todo, incluso en los navegadores de hoy, pero, como he dicho, es una herejía en el mundo de hoy: 

<center>
<table>
   ...
</table>
</center>

Lo que necesita es alguna forma de decir que desea centrar una mesa y que la persona está usando un navegador más antiguo. Luego inserte & Quot; & Lt; center & Gt; & Quot; comandos alrededor de la mesa. De lo contrario, use CSS.

Sorprendentemente, si desea centrar todo en el área del CUERPO, simplemente puede usar el estándar 

text-align: center;

comando css y en IE8 (al menos) centrará todo en la página, incluidas las tablas. 

style="text-align:center;"

(creo)

o simplemente podría ignorarlo, todavía funciona

Esto debería funcionar: 

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

Estoy aprendiendo esto y lo que finalmente funcionó para mí fue hacer primero una tabla con tres filas. Establezca el margen para las filas izquierda y derecha en 50%. Luego coloque una sola fila, tabla de ancho fijo dentro de & Quot; datos de tabla & Quot; del centro " fila de tabla " ;. 

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top