Manera CSS de alinear la tabla horizontalmente

96

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 una advertencia en esta línea:

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

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

— Alexander Prokofyev
fuente

2

Entonces, ¿qué solución escogiste al final?

— Ola Tuvesson

183

Steven tiene razón, en 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 "automático". Por tanto, se 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 brinda todas las otras formas de centrar la tabla.

Una elegante solución css entre navegadores: funciona tanto en MSIE 6 (Quirks and Standards), Mozilla, Opera e incluso Netscape 4.x sin establecer anchos explícitos:

div.centered 
{
    text-align: center;
}

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


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

— VonC
fuente

Puede hacer que la mesa se centre con un margen: 0 automático; en IE6 y versiones posteriores si se asegura de que su página tenga una declaración de tipo de documento válida.

— Ola Tuvesson

@Marco: No tengo esta información en este momento, pero puede ser una buena base para una pregunta sobre StackOverflow.

— VonC

1

tienes toda la razón. TABLE no necesita especificar un ancho para centrarse horizontalmente. Lo probé. Mientras que DIV necesita que se especifique un ancho para obtener un centrado horizontal.

— Marco Demaio

17

Prueba esto:

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

— jalbert
fuente

2

Sencillo. IE6 y superior centrarán felizmente su tabla con "margin: 0 auto;" si solo la página se muestra en modo "estándar". Para que esto suceda, necesita una declaración de tipo de documento 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">

Es cierto que IE5.5 y anteriores seguirán negándose 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 a estas alturas los usuarios de IE5.5 y anteriores están bastante acostumbrados a algunos sitios web de aspecto extraño, pero aún debe asegurarse de que esos fallos visuales no inutilicen su sitio.

¡Feliz codificación!

EDITAR: Lo siento, quizás debería señalar que no es necesario tener un tipo de documento "estricto" para obtener IE6 y subir al modo de representación "estándar". Me di cuenta de que podría parecer así por los ejemplos de tipo de documento que publiqué anteriormente. Por ejemplo, esta declaración de tipo de documento, por supuesto, funcionará igualmente:

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

— Ola Tuvesson
fuente

2

Aunque podría ser una herejía en el mundo actual, en el pasado usaba el siguiente código que no era CSS. Esto funciona en todo, incluidos los navegadores actuales, pero, como he dicho, es una herejía en el mundo actual:

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

Lo que necesita es alguna forma de saber que desea centrar una mesa y la persona está usando un navegador más antiguo. Luego inserte los comandos "<center>" alrededor de la mesa. De lo contrario, use css.

Sorprendentemente, si desea centrar todo en el área BODY, puede usar el estándar

text-align: center;

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

— Mark Manning
fuente

0

style="text-align:center;"

(Yo creo que)

o simplemente puede ignorarlo, todavía funciona

— Steven A. Lowe
fuente

0

Esto debería funcionar:

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

— Matt Howell
fuente

0

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 tabla de una sola fila y ancho fijo dentro de los "datos de la tabla" de la "fila de la tabla" central.

0

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

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

— Chandra Shekhar Sharma
fuente

0

Básicamente, funciona como,

<table align="center">
...

Pero puede hacerlo de una mejor manera usando CSS, y este será un mejor enfoque para usar CSS, ya que proporciona un comportamiento dinámico a una página web y responde.

  <table style="text-align:center;">

Además, si necesita mostrar solo la tabla en una página, puede elegir la alineación de la etiqueta del cuerpo solo como se muestra a continuación,

 <body style="text-align:center;">
<table>
  ...
</table>

Si desea alguna otra sugerencia, hágamelo saber. Seguramente te ayudará en esto. Además, al usar funciones de arranque, esto sería más fácil e interactivo.

— Gourav Goutam
fuente

0

Agregar al estilo div:

width: fit-content;

— Khaled Mohab
fuente