CSS forma de alinear horizontalmente la tabla

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

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

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

El atributo 'align' 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?

Author: Brian Tompsett - 汤莱恩, 2008-11-19
Source

8 answers

Steven tiene razón, en la teoría :

La forma "correcta" de centrar una tabla usando CSS. Los navegadores conformes deben 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 "auto."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 principio de esta respuesta te da la otra manera de centrar una tabla.

Un elegante navegador cruzado css solución: Esto funciona tanto en MSIE 6 (Peculiaridades 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>
 177
Author: VonC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-20 14:23:17

Prueba esto: 

<table width="200" style="margin-left:auto;margin-right:auto">
 13
Author: jalbert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-19 06:27:44

Simple. IE6 y superiores centrarán felizmente su tabla con "margin: 0 auto;" si solo la página se renderiza en modo "estándares". Para que esto suceda, necesita una declaración 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">

Cierto, IE5.5 y abajo todavía 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 por ahora los usuarios de IE5. 5 y por debajo están bastante acostumbrados a algunos sitios web de aspecto extraño - pero usted todavía hay que asegurarse de que esos fallos visuales no hacen que su sitio inutilizable.

Feliz codificación!

EDITAR: Lo siento, tal vez debería señalar que no tiene que tener un doctype "estricto" para obtener IE6 y subir al modo de renderizado "estándar". Me di cuenta de que podría parecer de esa manera a partir de los ejemplos de doctype que publiqué anteriormente. Por ejemplo, esta declaración doctype funcionará igualmente: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
Author: Ola Tuvesson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-20 14:21:00

Aunque podría ser herejía en el mundo de hoy, en el pasado haría el siguiente código no css. Esto funciona en todo hasta e incluyendo los navegadores de hoy, pero - como he dicho-es herejía en el mundo de hoy: 

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

Lo que necesita es alguna forma de decir que desea centrar una tabla y la persona está utilizando un navegador anterior. A continuación, inserte los comandos " " alrededor de la tabla. De lo contrario, use css.

Sorprendentemente - si quieres centrar todo en el CUERPO área-solo puede utilizar el estándar

text-align: center;

Comando Css y en IE8 (al menos) se centrará todo en la página incluyendo tablas.

 2
Author: Mark Manning,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-22 20:39:57 
style="text-align:center;"

(creo)

O simplemente podría ignorarlo, todavía funciona

 0
Author: Steven A. Lowe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-19 06:22:08

Esto debería funcionar: 

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
 0
Author: Matt Howell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-19 06:30:21

Estoy aprendiendo esto y lo que finalmente funcionó para mí fue primero hacer 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 los "datos de la tabla" del centro "fila de la tabla".

 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-10-02 02:36:49 
<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
 0
Author: Chandra Shekhar Sharma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-19 09:50:24