{"id":227601,"date":"2022-09-30T16:43:00","date_gmt":"2022-09-30T13:43:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227601"},"modified":"2022-11-08T18:58:35","modified_gmt":"2022-11-08T15:58:35","slug":"como-disenar-una-mesa-guia-detallada-para-hacerlo-bien","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-disenar-una-mesa-guia-detallada-para-hacerlo-bien\/","title":{"rendered":"C\u00f3mo dise\u00f1ar una mesa: gu\u00eda detallada para hacerlo bien"},"content":{"rendered":"\n

El uso de tablas y cuadr\u00edculas es com\u00fan cuando se dise\u00f1an productos y tableros digitales. Las tablas de datos ayudan a organizar gran parte de la informaci\u00f3n.<\/strong><\/p>\n

Presentan los datos de una manera m\u00e1s legible y comprensible<\/strong>. Tambi\u00e9n ayudan a enfatizar datos importantes y mejorar la visualizaci\u00f3n de datos.<\/p>\n

Las tablas a menudo se usan como un componente de la interfaz de usuario, pero muchos a\u00fan cometen errores al dise\u00f1ar tablas de datos. Algunos dise\u00f1os de mesas est\u00e1n llenos de ruido visual o son demasiado complejos, lo que resulta en una mala experiencia para el usuario.<\/p>\n

Obtener el dise\u00f1o de interfaz de usuario de la tabla correcta crea mejores comparaciones y visualizaciones de datos. Dise\u00f1ar tablas de la manera correcta las hace atractivas y mejora la legibilidad.<\/p>\n

Esta gu\u00eda muestra c\u00f3mo optimizar el dise\u00f1o de la tabla de datos y mejorar la funcionalidad de la tabla.<\/p>\n

Dise\u00f1ar tablas de datos de la manera correcta<\/strong><\/h2>\n

Al planificar el dise\u00f1o de una mesa, hay dos cosas en las que trabajar: el estilo de la mesa y la funcionalidad de la mesa.<\/p>\n

Estilo de tabla<\/h3>\n

Alineaci\u00f3n de datos de la tabla<\/h4>\n

Fuente de imagen<\/a><\/p>\n

Para diferenciar el texto de los datos num\u00e9ricos, alinee el texto a la izquierda<\/strong> y los n\u00fameros a la derecha<\/strong>. Tal alineaci\u00f3n facilita la comparaci\u00f3n de dos datos diferentes.<\/p>\n

Los encabezados de las tablas tambi\u00e9n deben alinearse con los datos de sus columnas para un dise\u00f1o de tabla estructurado.<\/p>\n

Algunas celdas de la tabla pueden tener varias l\u00edneas de texto,<\/strong> como las descripciones. La alineaci\u00f3n vertical<\/strong> de dicho contenido debe estar en la parte superior<\/strong>.<\/p>\n

De lo contrario, los datos de la columna no se alinear\u00e1n entre s\u00ed.<\/p>\n

Agregar secci\u00f3n destacada<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Tabla de precios que puedes crear con wpDataTables<\/a><\/p>\n

Una secci\u00f3n destacada es una columna, fila o celda de<\/strong> una tabla que el autor desea resaltar<\/strong>. Por lo general, se aplica a las tablas de precios o al comparar planes de suscripci\u00f3n.<\/p>\n

Use una secci\u00f3n destacada para resaltar informaci\u00f3n importante en la tabla. Este podr\u00eda ser el mejor plan de valor o un elemento popular entre una lista, por ejemplo.<\/p>\n

Para crear una secci\u00f3n destacada, cambie el formato de las celdas.<\/strong> Por ejemplo, modifique el color de relleno de la celda o el tama\u00f1o de fuente del texto para que se destaque.<\/p>\n

Aplicar colores<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Una tabla de datos no debe tener demasiados colores.<\/strong> \u00daselos solo para encabezados de tablas, tendencias positivas y negativas y secciones destacadas.<\/p>\n

Agregar demasiados colores crea ruido visual. Esto hace que sea dif\u00edcil distinguir los elementos que deben resaltarse.<\/p>\n

Utilice tonos de gris m\u00e1s oscuros<\/strong> para el color de la fuente y tonos de gris m\u00e1s claros<\/strong> para el color del borde en lugar del color negro normal. El uso de tonos m\u00e1s suaves de negro lo hace menos intenso, lo que reduce la fatiga visual.<\/p>\n

Aplique colores variados al diferenciar categor\u00edas o al enfatizar los valores m\u00e1s altos y m\u00e1s bajos. Para enfatizar ciertas secciones en la tabla, use<\/strong> colores de relleno<\/strong> m\u00e1s brillantes o llamativos para que se destaquen.<\/p>\n

Colores de fila alternos<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Tabla con celdas de combinaci\u00f3n que puedes crear con wpDataTables<\/a><\/p>\n

La alternancia de colores de las filas mejora la legibilidad.<\/strong> Establece se\u00f1ales visuales<\/strong>, ayudando a las personas a seguir una lista de informaci\u00f3n y conectar datos.<\/p>\n

Esto es especialmente \u00fatil cuando se crea una base de datos grande. Tambi\u00e9n funciona bien para tablas de datos peque\u00f1as.<\/p>\n

Cree un efecto de ‘rayas de cebra’<\/strong> alternando el color de relleno blanco con un color m\u00e1s oscuro como el gris claro. Si usa otros colores, use un color de relleno claro y alt\u00e9rnelo con un tono ligeramente m\u00e1s oscuro.<\/p>\n

Uso de fuente monoespaciada<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Para un dise\u00f1o de tabla m\u00e1s estructurado, use un estilo de fuente monoespaciado para datos num\u00e9ricos<\/strong>.<\/p>\n

La fuente tabular o monoespaciada tiene un ancho y espaciado fijos<\/strong> para cada car\u00e1cter. Esto mejora la tipograf\u00eda y la legibilidad.<\/p>\n

Los ejemplos de fuentes monoespaciadas incluyen Courier, Courier New, Lucida Console y Monaco.<\/p>\n

Para mejorar a\u00fan m\u00e1s la simetr\u00eda, aseg\u00farese de formatear d\u00edgitos de la misma longitud,<\/strong> como fechas, por ejemplo. En lugar de escribir 15\/3\/2019, formatee la fecha como 15\/03\/2019.<\/p>\n

Visualizaci\u00f3n de datos de tablas<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Convierta los datos de las columnas en gr\u00e1ficos de barras horizontales.<\/strong> Esto ayuda a visualizar datos y generar una visi\u00f3n general.<\/p>\n

Los gr\u00e1ficos de barras horizontales permiten a los usuarios comparar conjuntos de datos e interpretarlos con facilidad. Cada barra se encuentra en una columna junto a los datos que representa, alineada verticalmente y dividida en filas.<\/p>\n

Insertar un gr\u00e1fico de barras a menudo expande demasiado la columna. Por lo tanto, considere mostrar barras solo para visualizar valores importantes.<\/p>\n

Otro m\u00e9todo para visualizar datos de tablas es usar mapas de calor.<\/strong><\/p>\n

Los mapas de calor ajustan el tono de color del fondo de la celda o el color de relleno seg\u00fan el valor num\u00e9rico de la celda, creando un degradado de un color. Cuanto mayor sea el valor num\u00e9rico, m\u00e1s oscuro se vuelve el color de relleno .<\/strong><\/p>\n

Funcionalidad de la tabla<\/h3>\n

Hazlo receptivo<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Una tabla de datos efectiva funciona bien en diferentes dispositivos. Debe mostrar los datos de manera legible<\/strong> cuando se abre en tel\u00e9fonos inteligentes, tabletas y computadoras port\u00e1tiles.<\/strong><\/p>\n

Ver tablas en pantallas m\u00e1s peque\u00f1as requiere muchos cambios en el dise\u00f1o de la tabla. Es posible que un dise\u00f1o de mesa construido en escritorios grandes no funcione en dispositivos m\u00e1s peque\u00f1os.<\/p>\n

Pruebe la tabla en dispositivos m\u00f3viles<\/strong>. Aseg\u00farese de que los usuarios puedan escanear la informaci\u00f3n sin tener que desplazarse sin cesar.<\/p>\n

Tenga cuidado con las columnas reducidas y los textos ocultos, ya que dan como resultado una experiencia de usuario deficiente.<\/p>\n

Recuerde, en pantallas m\u00e1s peque\u00f1as, las columnas estrechas son mejores.<\/strong> Hay diferentes formas de hacer las columnas m\u00e1s delgadas.<\/p>\n

Esto incluye el uso de iconos, abreviaturas, formatos de n\u00fameros m\u00e1s cortos y datos num\u00e9ricos redondeados.<\/strong> As\u00ed que 2,5 m en lugar de 2\u00a0500\u00a0000 y 0,3 en lugar de 0,3241.<\/p>\n

Habilitar el reordenamiento de columnas<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Las tablas de datos grandes a veces son dif\u00edciles de leer debido a su tama\u00f1o y la cantidad de informaci\u00f3n que contienen. Permitir que los usuarios reordenen las columnas les permite concentrarse en las columnas<\/strong> que necesitan leer.<\/p>\n

Tambi\u00e9n significa que pueden hacer esto sin desplazarse de un lado a otro<\/strong>. Esto ayuda a los usuarios a minimizar el desorden, digerir peque\u00f1os fragmentos de informaci\u00f3n y organizar las columnas seg\u00fan sus necesidades.<\/p>\n

Considere tener una altura de fila fija<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Tabla que puedes crear con wpDataTables<\/a><\/p>\n

Si la tabla de datos contiene muchas columnas, ancle las primeras<\/strong> columnas. Esto mantendr\u00e1 el contexto<\/strong> mientras los usuarios se desplazan por el resto de la tabla.<\/p>\n

Se recomienda encarecidamente tener columnas personalizables. Pero las filas<\/strong> de las tablas deben tener una altura fija<\/strong> para mantener la simetr\u00eda y evitar confundir a los lectores.<\/p>\n

Independientemente de los datos, la altura de fila fija mejora el dise\u00f1o y las im\u00e1genes de la interfaz de usuario de la tabla.<\/p>\n

Usar la paginaci\u00f3n para tablas de datos largas<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Tabla paginada que puedes crear con wpDataTables<\/a><\/p>\n

Existe una regla no escrita de que las tablas de datos no deben ser m\u00e1s largas que una pantalla de escritorio<\/strong>. Sin embargo, esto no es posible si una tabla de datos es larga.<\/p>\n

Evite que las tablas de datos largas ocupen una gran parte de una p\u00e1gina web y maximice el espacio en blanco. Haga esto habilitando la funci\u00f3n de paginaci\u00f3n<\/strong>.<\/p>\n

Esto tambi\u00e9n sirve para guiar a los lectores<\/strong> a trav\u00e9s de la tabla y ayudarlos a navegar<\/strong>.<\/p>\n

Cuando utilice la paginaci\u00f3n, incluya el n\u00famero de p\u00e1gina<\/strong> para mostrar cu\u00e1ntas p\u00e1ginas hay y en qu\u00e9 p\u00e1gina est\u00e1n los lectores. Adem\u00e1s, para proporcionar a los usuarios m\u00e1s control, perm\u00edtales personalizar<\/strong> cu\u00e1ntas filas ver por p\u00e1gina.<\/p>\n

Incluir funci\u00f3n de clasificaci\u00f3n de tablas<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Permitir que los usuarios tengan m\u00e1s control sobre la tabla de datos mejora el dise\u00f1o de la interfaz de usuario de la tabla. Si la tabla contiene mucha informaci\u00f3n, una forma de ayudar a los lectores a ubicar los datos que necesitan es agregar una funci\u00f3n de clasificaci\u00f3n.<\/p>\n

La clasificaci\u00f3n permite a los usuarios organizar los datos<\/strong> de acuerdo con \u00f3rdenes l\u00f3gicos espec\u00edficos.<\/strong><\/p>\n

Esto puede ser alfab\u00e9tico, modificado por fecha y hora, ascendente, descendente y m\u00e1s. Cuantas m\u00e1s opciones, mejor.<\/p>\n

Otra forma de ordenar los datos es incluir un campo de b\u00fasqueda<\/strong>. Esto permite a los lectores buscar datos espec\u00edficos, como el nombre de una empresa, ubicaci\u00f3n, productos y m\u00e1s.<\/p>\n

Filtrado de datos<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Tabla con filtros que puedes crear con wpDataTables<\/a><\/p>\n

El filtrado de datos es otra forma de aumentar la funcionalidad de una tabla de datos. Los usuarios pueden digerir grandes cantidades de datos, comprender tendencias y crear comparaciones.<\/p>\n

Tambi\u00e9n pueden localizar cierta informaci\u00f3n y analizar datos complejos. Esto es especialmente cierto para las tablas de datos num\u00e9ricos.<\/p>\n

Aseg\u00farese de que los usuarios puedan personalizar par\u00e1metros o conjuntos de filtros<\/strong> para determinadas columnas. Adem\u00e1s, incluya una opci\u00f3n de filtrado avanzado para guardar el conjunto de filtros<\/strong> que crearon para uso futuro.<\/p>\n

Mantenga el contexto, use encabezados fijos y columnas congeladas<\/h4>\n

\"C\u00f3mo<\/a><\/p>\n

Leer una gran tabla de datos requiere mucho desplazamiento vertical y horizontal. Para mantener el contexto , ancle los encabezados de las columnas<\/strong>, as\u00ed como la primera columna o las primeras columnas.<\/strong><\/p>\n

Microsoft Excel y Google Sheets se refieren a las columnas ancladas como "congeladas"<\/strong>.<\/p>\n

Para facilitar la navegaci\u00f3n por la tabla, agregue una selecci\u00f3n de fila completa.<\/strong> Esto permite a los usuarios marcar filas importantes<\/strong> a medida que se desplazan horizontalmente.<\/p>\n

Esto puede ser complicado si la tabla tiene filas expandibles y puede resultar en un efecto diferente.<\/p>\n

Reflexiones finales sobre c\u00f3mo dise\u00f1ar una mesa de la manera correcta<\/strong><\/h2>\n

Saber qu\u00e9 considerar al crear un dise\u00f1o de interfaz de usuario de tabla conduce a tablas efectivas. Estos permiten a los usuarios comparar datos y ordenar informaci\u00f3n,<\/strong> y tambi\u00e9n aumentan la legibilidad<\/strong>.<\/p>\n

Aprender a dise\u00f1ar una mesa permite a los dise\u00f1adores reducir el ruido visual y hacer un buen uso del espacio en blanco<\/strong>. Los consejos de dise\u00f1o proporcionados aqu\u00ed pueden optimizar el dise\u00f1o de la tabla y los datos del usuario.<\/p>\n

Seguir estos consejos mejorar\u00e1 el estilo y la funcionalidad general de la tabla. Adem\u00e1s, ayudan a mejorar la experiencia del usuario y la imagen de marca.<\/p>\n

Si disfrut\u00f3 leyendo este art\u00edculo sobre c\u00f3mo dise\u00f1ar una tabla, debe consultar este sobre c\u00f3mo hacer una tabla de datos.<\/a><\/p>\n

Tambi\u00e9n escribimos sobre algunos temas relacionados, como ejemplos de tablas de datos, ejemplos de tablas<\/a> de precios<\/a>, alternativas de DataTables<\/a>, biblioteca de tablas de JavaScript<\/a>, complementos de tablas de WordPress<\/a>, c\u00f3mo crear una tabla en WordPress sin un complemento<\/a>, c\u00f3mo insertar una tabla en WordPress<\/a>, precios<\/a> de WordPress \u00a0complementos\u00a0 de tablas y<\/a> c\u00f3mo crear tablas estad\u00edsticas en WordPress.<\/a><\/p>\n

Fuente de grabaci\u00f3n: wpdatatables.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Las tablas de datos ayudan a organizar gran parte de la informaci\u00f3n. Esta gu\u00eda muestra c\u00f3mo dise\u00f1ar una tabla de datos y mejorar la funcionalidad de la tabla.<\/p>\n","protected":false},"author":1,"featured_media":180135,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716,831,914,840,861],"tags":[1172],"class_list":["post-227601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-guia-para-principiantes","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/227601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=227601"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/227601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/180135"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=227601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=227601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=227601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}