<table align=\"center\"><\/code><\/pre>\nSin embargo, alinear sus tablas de esta manera ya no es correcto y se ha desaprobado en HTML5. Esto se debe a que los est\u00e1ndares web modernos dictan la separaci\u00f3n de estructura (HTML) y estilo (CSS), y el m\u00e9todo anterior viola ese principio.<\/p>\n
HTML nunca debe usarse para establecer la forma en que aparece un elemento; ese es ahora el trabajo de CSS. Entonces, \u00bfcu\u00e1l es la forma correcta de centrar una tabla en CSS?<\/a> En este art\u00edculo de nuestro equipo en wpDataTables, abordamos esta pregunta y le mostramos algunos consejos sobre c\u00f3mo alinear sus tablas correctamente.<\/p>\nSabemos un par de cosas sobre las tablas, teniendo en cuenta que hemos creado un incre\u00edble complemento de tablas de WordPress<\/a>, as\u00ed que profundicemos.<\/p>\n\u00bfC\u00f3mo puedo usar CSS para centrar una mesa?<\/h3>\n
CSS establece el aspecto de la p\u00e1gina, lo que le permite controlar la apariencia y el posicionamiento de cada elemento, incluido el elemento de la tabla y todos sus subelementos, como th, tr y td.<\/p>\n
Lo primero es lo primero, repasemos la forma "correcta" de centrar una tabla con CSS. Si los m\u00e1rgenes derecho e izquierdo tienen el mismo valor, los navegadores modernos deber\u00edan mostrar la tabla centrada. Una manera f\u00e1cil de lograr esto es tener ambos m\u00e1rgenes configurados en autom\u00e1tico.<\/p>\n
A continuaci\u00f3n se muestra un ejemplo de c\u00f3mo escribir esto en CSS:<\/p>\n
table<\/code><\/pre>\nTenga en cuenta que no puede simplemente centrar la tabla de la misma manera que lo har\u00eda con el texto, por ejemplo, usando "text-align: center". Esto se debe a que el elemento de la tabla es un elemento a nivel de bloque, a diferencia de un elemento en l\u00ednea. "texto -align: center" solo centrar\u00e1 el contenido en l\u00ednea, como el texto dentro de la tabla, en lugar de la tabla en s\u00ed.<\/p>\n
Sin embargo, para las versiones anteriores de Internet Explorer, existe un error en el que los elementos a nivel de bloque se tratan como elementos en l\u00ednea. Por lo tanto, la \u00fanica forma de centrar una tabla para que funcione con algunas versiones de IE es establecer expl\u00edcitamente "text-align: center" en el elemento principal de la tabla (por ejemplo, el elemento del cuerpo como se muestra a continuaci\u00f3n):<\/p>\n
body {<\/code><\/pre>\nPuede probar c\u00f3mo se comportar\u00e1n los diferentes navegadores con diferentes estilos, ya sea usando \u00abmargin-left: auto; margin-right: auto\u00bb o \u00abtext-align: center\u00bb.<\/p>\n
Veremos c\u00f3mo centrar una tabla en navegadores modernos y antiguos para que se vea bien.<\/p>\n
Los ejemplos tendr\u00e1n el siguiente formato general:<\/p>\n
<div>\n\n<table>\n\n<\/table>\n\n<\/div><\/code><\/pre>\nLos estilos se aplican a cualquiera<\/p>\n
,<\/p>\n
o a veces ambos.<\/p>\n
La secci\u00f3n de la hoja de estilo con la que jugaremos para establecer los m\u00e1rgenes es:<\/p>\n
.center1<\/code><\/pre>\nEste ejemplo funcionar\u00e1 bien en los navegadores m\u00e1s nuevos. Tambi\u00e9n funcionar\u00e1 en la mayor\u00eda de los navegadores m\u00e1s antiguos. Una vez que haya utilizado este m\u00e9todo, \u00e1bralo en diferentes navegadores para ver c\u00f3mo se ve.<\/p>\n
CSS para navegadores m\u00e1s antiguos y navegadores m\u00e1s nuevos juntos:<\/p>\n
.centertbl<\/code><\/pre>\n\u00bfC\u00f3mo funciona? La primera parte se pone en el<\/p>\n
. Esto centrar\u00e1 una tabla en Internet Explorer 5 y Netscape 4. La segunda parte se aplica a la<\/p>\n
Dentro de un<\/p>\n
.<\/p>\n
La configuraci\u00f3n de los m\u00e1rgenes le permitir\u00e1 centrar una tabla en navegadores que funcionan bien con CSS. Luego, el texto en l\u00ednea se volver\u00e1 a colocar en la alineaci\u00f3n izquierda predeterminada, anulando la "alineaci\u00f3n de texto: centro" inicial para la compatibilidad con navegadores m\u00e1s antiguos.<\/p>\n
C\u00f3mo centrar con un margen<\/h3>\n
Una de las formas m\u00e1s comunes de centrar una tabla es establecer los m\u00e1rgenes inferior y superior en 0, y los m\u00e1rgenes izquierdo y derecho en autom\u00e1tico.<\/p>\n
Aqu\u00ed hay un m\u00e9todo com\u00fanmente utilizado:<\/p>\n
table {<\/code><\/pre>\nO puedes hacerlo de esta manera:<\/p>\n
table {<\/code><\/pre>\nSi busca una tabla que tenga el ancho exacto, puede hacer esto como lo har\u00eda normalmente y el margen autom\u00e1tico dividir\u00e1 el espacio sobrante.<\/p>\n
table {<\/code><\/pre>\nOtra forma de hacerlo es usar porcentajes para definir el ancho:<\/p>\n
table {<\/code><\/pre>\nAlineaci\u00f3n de celdas: alineaci\u00f3n de texto frente a alineaci\u00f3n vertical<\/h3>\n
Si desea saber c\u00f3mo centrar el texto en CSS, hay dos partes para alinear el texto en una celda; horizontal y verticalmente. Horizontalmente es si el texto se alinear\u00e1 al centro, a la izquierda o a la derecha de esa celda. Esto est\u00e1 controlado por la propiedad text-align.<\/p>\n
Verticalmente es si est\u00e1 en el medio, arriba o abajo de la celda. Esto est\u00e1 controlado por la propiedad de alineaci\u00f3n vertical.<\/p>\n
Aplique las siguientes propiedades al elemento TH o TD para que su texto se alinee vertical y horizontalmente como desee. Por ejemplo:<\/p>\n
td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-201255-61e8be3d0713d.jpg\")
<\/a><\/p>\nJustificar el texto se refiere a agregar espacios entre todas las palabras hasta que se ajusten perfectamente al espacio disponible en la l\u00ednea. La l\u00ednea final no justifica.<\/p>\n
Consejos de estilo de mesa<\/h3>\n
Antes de concluir, pensamos que ser\u00eda \u00fatil tener una lista de consejos r\u00e1pidos para su referencia. Estos te ayudar\u00e1n cuando hagas una tabla en CSS.<\/a><\/p>\n\n- alinea tu<\/li>\n<\/ul>\n
,<\/p>\n
, y<\/p>\n
. Esto tambi\u00e9n le brinda m\u00e1s partes donde puede aplicar CSS. Esto hace que sea m\u00e1s sencillo superponer varios estilos.<\/p>\n