html - texto - Forma de CSS para alinear horizontalmente la tabla
centrar texto css (8)
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 ''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?
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 hasta los navegadores de hoy pero, como ya he dicho, es una herejía en el mundo de hoy:
<center>
<table>
...
</table>
</center>
Lo que necesita es una forma de decirle que quiere centrar una mesa y que la persona está utilizando un navegador más antiguo. Luego inserte los comandos "<center>" alrededor de la mesa. De lo contrario, use css.
Sorprendentemente, si quieres centrar todo en el área BODY, puedes usar el estándar
text-align: center;
comando css y en IE8 (al menos) centrará todo en la página, incluidas las tablas.
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 primero hacer una tabla con tres filas. Establezca el margen para las filas izquierda y derecha al 50%. Luego coloque una sola fila, tabla de ancho fijo dentro de los "datos de la tabla" de la "fila de la mesa" central.
Prueba esto:
<table width="200" style="margin-left:auto;margin-right:auto">
Sencillo. IE6 y superior felizmente centrarán su tabla con "margin: 0 auto;" si solo la página se procesa en el modo "estándares". 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 siguientes seguirán negándose a centrar la tabla, pero quizás pueda vivir con eso, especialmente si la página sigue siendo funcional con la tabla alineada a la izquierda. Creo que, por ahora, los usuarios de IE5.5 y de versiones posteriores están bastante acostumbrados a algunos sitios web de aspecto extraño, pero aún debe asegurarse de que esos problemas técnicos visuales no hagan que su sitio quede inutilizable.
Feliz codificación!
EDIT: Perdón, tal vez debería señalar que no es necesario tener un doctype "estricto" para obtener IE6 y subir al modo de representación "estándar". Me di cuenta de que podría parecer así de los ejemplos de tipo de letra que publiqué arriba. Por ejemplo, esta declaración de tipo de documento funcionará por supuesto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Steven tiene razón, en theory :
la forma "correcta" de centrar una tabla usando CSS. Los navegadores de conformidad deben centrar 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 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 ofrece todo lo contrario para centrar una mesa.
Una solución css cross-browser elegante: Funciona tanto en MSIE 6 (Quirks and Standards), 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>
<style>
.abc {
text-align: center;
}
</style>
<table class="abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>
style="text-align:center;"
(creo)
o simplemente podrías ignorarlo, todavía funciona