Índice
Las tablas son un patrón de diseño para mostrar grandes cantidades de datos en filas y columnas, y todavía no parecen haber perdido popularidad, así que echemos un vistazo a cómo podemos crear tablas en la web en 2019.
Las tablas son un patrón de diseño para mostrar grandes cantidades de datos en filas y columnas, lo que las hace eficientes para realizar análisis comparativos de objetos categóricos . Las mesas se han utilizado para este propósito ya en el siglo II y cuando el mundo empezó a digitalizarse, las mesas nos acompañaron.
Era inevitable que la Web admitiera la visualización de datos en formato tabular. Las tablas HTML presentan datos tabulares de una manera semántica y estructuralmente apropiada . Sin embargo, los estilos predeterminados en las tablas HTML no son exactamente lo más agradable desde el punto de vista estético que jamás hayas visto. Dependiendo del diseño visual deseado, se requirió algo de esfuerzo en el frente CSS para embellecer esas tablas. Hace una década, se publicó un artículo con los " 10 mejores diseños de tablas CSS " en Smashing Magazine, y todavía continúa recibiendo mucho tráfico hasta el día de hoy.
La web ha evolucionado mucho durante la última década y es más conveniente que nunca hacer que su sitio o aplicación se adapte a la ventana gráfica en la que se visualiza. Dicho esto, debemos continuar tomando decisiones de diseño consideradas que no comprometan accesibilidad . Dado que las tablas no parecen estar perdiendo popularidad en el corto plazo, veamos cómo se pueden crear tablas en la web en 2019.
Opciones de solo CSS
Si su conjunto de datos no es tan grande y funciones como la paginación y la clasificación no son necesarias, considere una opción sin JavaScript. Puede obtener resultados bastante buenos que funcionan bien en una amplia gama de tamaños de pantalla sin el peso adicional de una biblioteca grande.
Desafortunadamente, sin la ayuda de JavaScript para algunas manipulaciones de DOM en el frente de accesibilidad, solo tenemos un puñado de opciones exclusivas de CSS. Pero para conjuntos de datos pequeños, suelen ser suficientes.
Opción 1: no hacer nada
Vamos a empezar con un escenario de bajo esfuerzo. Si sus datos caben en una tabla con solo unas pocas columnas y muchas filas, entonces dicha tabla está prácticamente lista para dispositivos móviles, para empezar.
El problema que tendría probablemente es tener demasiado espacio en pantallas más anchas, por lo que podría ser aconsejable "limitar" el ancho máximo de la mesa dejando que max-widthse reduzca según sea necesario en una pantalla estrecha.
Consulte la tabla Pen n.º 1: pocas columnas, muchas filas de ( Chen Hui Jing ) en CodePen .
Este tipo de patrón funciona mejor si los datos en sí no son líneas y líneas de texto. Si son números o frases cortas, probablemente no puedas hacer mucho.
Opción 2: diseñar el pergamino
David Bushell escribió su técnica para tablas responsivas en 2012, que implicaba invocar el desbordamiento y permitir a los usuarios desplazarse para ver más datos. Se podría argumentar que esta no es exactamente una solución responsiva, pero técnicamente, el contenedor responde al ancho de la ventana gráfica.
Veamos primero el desbordamiento "básico". Imagínenme usando comillas en torno a lo básico, porque el estilo de las sombras que se desplazan es todo lo contrario. Aún así, en este caso, “básico” se refiere al hecho de que la mesa no se transforma de ninguna manera.
Consulte la tabla de lápiz n.° 3: Estilo del pergamino (básico) de Chen Hui Jing en CodePen .
Esta técnica para hacer sombras en movimiento proviene de Roma Komarov y Lea Verou, que intercambian las ideas de cada uno para crear magia. Depende del uso de múltiples degradados (lineales y radiales) como imágenes de fondo en el elemento contenedor y del uso background-attachment: localpara posicionar el fondo en relación con su contenido.
Lo bueno de esta técnica es que para los navegadores que no admiten el desplazamiento de sombras, aún puedes desplazarte por la tabla como de costumbre. No rompe el diseño en absoluto.
Otra opción de desplazamiento sería voltear los encabezados de la tabla de una configuración de fila a una configuración de columna, mientras se aplica un desplazamiento horizontal al tbodycontenido del elemento. Esta técnica aprovecha el comportamiento de Flexbox para transformar las filas de la tabla en columnas.
Consulte la tabla de lápiz n.° 3: Estilo del pergamino (encabezados invertidos) de Chen Hui Jing en CodePen .
Al aplicarlo display: flexa la mesa, hace que theadambos tbodyhijos se flexionen, que de forma predeterminada se colocan uno al lado del otro en la misma línea flexible.
También convertimos el tbodyelemento en un contenedor flexible, lo que hace que todos los trelementos dentro de él sean hijos flexibles dispuestos también en una sola línea flexible. Por último, cada celda de la tabla debe tener su visualización configurada blocken lugar del valor predeterminado table-cell.
La ventaja de esta técnica es que los encabezados siempre están a la vista, como un efecto de encabezado fijo, para que los usuarios no pierdan el contexto mientras se desplazan por las columnas de datos. Una cosa a tener en cuenta es que esta técnica da como resultado una discrepancia entre el orden visual y el de la fuente, y esto hace que las cosas sean un poco poco intuitivas.
Espolvorea algo de JavaScript
Como se mencionó anteriormente, las opciones de diseño que implican transformar la tabla modificando displayvalores a veces tienen implicaciones negativas para la accesibilidad, que requieren una manipulación menor del DOM para rectificarlas.
Además, hay una serie de consejos para la experiencia del usuario cuando se trata de diseñar tablas de datos de Andrew Coyle , incluidas funciones como paginación, clasificación, filtrado, etc. (funciones que requieren algo de JavaScript para habilitarse). Anime en Español
Si está trabajando con un conjunto de datos relativamente más simple, quizás le gustaría escribir sus propias funciones para algunas de estas características.
De filas a bloques, con solución de accesibilidad
Hasta donde yo sé, esta técnica de tablas de datos responsivas surgió del artículo CSS-Tricks " Tablas de datos responsivos " de Chris Coyier en 2011. Desde entonces, muchos otros la han adaptado y ampliado.
La esencia de esta técnica es hacer uso de una consulta de medios para cambiar la propiedad de visualización del elemento de la tabla y sus elementos secundarios a blockuna ventana gráfica estrecha.
En una pantalla estrecha, los encabezados de las tablas están visualmente ocultos, pero aún existen en el árbol de accesibilidad. Al aplicar atributos de datos a las celdas de la tabla, podemos mostrar etiquetas para los datos a través de CSS, manteniendo el contenido de la etiqueta en HTML. Consulte el CodePen a continuación para ver cómo se ven las marcas y los estilos:
Consulte la tabla Pen n.º 2: Filas a bloques de Chen Hui Jing en CodePen .
El método original aplica un ancho en el pseudoelemento que muestra el texto de la etiqueta, pero eso significa que necesitarías saber la cantidad de espacio que necesita tu etiqueta para empezar. El ejemplo anterior utiliza un enfoque ligeramente diferente, mediante el cual la etiqueta y los datos están cada uno en lados opuestos de su bloque contenedor.
Podemos lograr tal efecto mediante márgenes automáticos en un contexto de formato flexible. Si configuramos la propiedad de visualización para cada tdelemento en flex, debido a que los pseudoelementos generan cuadros como si fueran hijos inmediatos de su elemento original, se convierten en hijos flexibles de td.
Después de eso, es cuestión de configurar margin-right: autoel pseudoelemento para empujar el contenido de la celda al borde más alejado de la celda.
Otro método para realizar el diseño de ventana gráfica estrecha es utilizar una combinación de Grid y display: contents. Tenga en cuenta que display: contentslos navegadores compatibles tienen problemas de accesibilidad en este momento y este método no debe usarse en producción hasta que se solucionen esos errores.
Pero tal vez estés leyendo esto después de que se hayan resuelto esos errores; en ese caso, aquí tienes una opción de diseño alternativa.
Consulte la Tabla de lápiz n.° 2: Filas a bloques (alt) de Chen Hui Jing en CodePen .
Cada trelemento se establece en display: gridy cada tdelemento se establece en display: contents. Sólo los hijos inmediatos de un contenedor de cuadrícula participan en un contexto de formato de cuadrícula; en este caso, es el tdelemento.
Cuando display: contentsse aplica a td, se "reemplaza" por su contenido; en este caso, el pseudoelemento y el spandentro de se tdconvierten en los elementos secundarios de la cuadrícula.
Lo que me gusta de este enfoque es la posibilidad de utilizarlo max-contentpara dimensionar la columna de pseudoelementos, asegurando que la columna siempre tendrá el ancho de la etiqueta más larga, sin que tengamos que asignarle manualmente un valor de ancho.
En el futuro, cuando los valores de tamaño de y min-content( cubiertos por el módulo de tamaño intrínseco y extrínseco de CSS Nivel 3 ) sean admitidos como valores generales y , tendremos aún más opciones para diseñar las cosas.max-contentfit-contentwidthheight
La desventaja de este enfoque es que necesita ese contenido adicional spano palrededor del contenido en la celda de su tabla si aún no lo tenía; de lo contrario, no habría forma de aplicarle estilos.
Paginación sencilla
Este ejemplo muestra una implementación de paginación básica que Gjore Milevski modificó en este CodePen para paginar en filas de la tabla en lugar de divs. Es una extensión del ejemplo de “ estilo del desplazamiento ” analizado en la sección anterior.
Consulte la tabla Pen n.° 4: paginación simple de Chen Hui Jing en CodePen .
Desde una perspectiva de diseño, Flexbox resulta muy útil para colocar los elementos de paginación en varios tamaños de ventana gráfica. Diferentes diseños de proyectos tendrán diferentes requisitos, pero la versatilidad de Flexbox debería permitirle atender estas diferencias en consecuencia.
En este caso, la paginación está centrada en la página y encima de la tabla. Los controles para navegar hacia adelante y hacia atrás están ubicados a ambos lados de los indicadores de página en pantallas más anchas, pero los cuatro aparecen encima de los indicadores de página en pantallas estrechas.
Podemos hacer esto aprovechando la orderpropiedad. El reordenamiento visual del contenido siempre debe realizarse con consideración porque esta propiedad no cambia el orden de origen, solo la forma en que aparece en las pantallas.
Clasificación sencilla
Este ejemplo muestra una implementación de clasificación básica modificada de este fragmento de código por Peter Noble para atender tanto a texto como a números:
Consulte Pen #Tabla 5: Clasificación simple de Chen Hui Jing en CodePen .
Sería útil tener algún tipo de indicador de qué columna se está ordenando actualmente y en qué orden. Podemos hacerlo agregando clases CSS a las que luego se les puede aplicar el estilo que desee. En este caso, los símbolos indicadores son pseudoelementos que se alternan cuando se hace clic en el encabezado de destino.
Búsqueda sencilla
Este ejemplo es una funcionalidad de filtrado básica que recorre en iteración todo el contenido textual de cada celda de la tabla y aplica una clase CSS para ocultar todas las filas que no coinciden con el campo de entrada de búsqueda.
Consulte la tabla Pen n.º 6: Filtrado simple de Chen Hui Jing en CodePen .
Esta implementación es relativamente ingenua y, si su caso de uso lo requiere, podría tener sentido buscar por columna. En ese escenario, podría ser una buena idea tener cada campo de entrada como parte de la tabla en sus respectivas columnas.
Deje que una biblioteca se encargue de ello
Los fragmentos de JavaScript anteriores sirven para demostrar cómo se pueden mejorar las tablas con mayores cantidades de datos para hacer la vida más fácil a los usuarios de esas tablas. Pero con conjuntos de datos realmente grandes, probablemente tenga sentido utilizar una biblioteca existente para administrar tablas grandes.
El patrón de alternancia de columnas es aquel en el que las columnas no esenciales se ocultan en pantallas más pequeñas. Normalmente, no soy partidario de ocultar contenido simplemente porque la ventana gráfica es estrecha, pero este enfoque de Maggie Costello Wachs de Filament Group resuelve ese problema al proporcionar un menú desplegable que permite a los usuarios volver a alternar las columnas ocultas. vista.
El artículo anterior se publicó en 2011, pero desde entonces Filament Group ha desarrollado un conjunto completo de complementos de tablas receptivos conocido como Tablesaw , que incluye funciones como clasificación, selección de filas, internacionalización, etc.
La función de alternancia de columnas en TableSaw ya no depende de jQuery, a diferencia de los ejemplos del artículo original. Tablesaw es una de las únicas bibliotecas que pude encontrar que no depende de jQuery en este momento.
Terminando
Existe una gran variedad de patrones de diseño de tablas, y el enfoque que elija depende en gran medida del tipo de datos que tenga y del público objetivo de esos datos. Al fin y al cabo, las tablas son un método para la organización y presentación de datos. Es importante determinar qué información es más importante para sus usuarios y decidir el enfoque que mejor satisfaga sus necesidades.
Otras lecturas
- “ Tablas responsivas solo CSS ”, David Bushell
- “ Tablas accesibles, sencillas y responsivas ”, Davide Rizzo, CSS-Tricks
- “ Diseño de tabla responsivo ”, Matt Smith
- “ Patrones responsivos: tablas ”, Brad Frost
- " Oye, todavía está bien usar tablas ", Adrian Roselli
- “ Tablas, propiedades de visualización CSS y ARIA ”, Adrian Roselli
- “ Tablas de datos ”, Heydon Pickering
(ra, il)Explora más en
- CSS
- javascript
- Patrones de diseño
- Diseño de respuesta
Tal vez te puede interesar:
- ¿Qué es Redux? Una guía para el diseñador
- Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
- Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
- Componentes de diseño en React
Patrones de diseño de mesas en la web
Opción 1: no hacer nadaOpción 2: diseñar el pergaminoDe filas a bloques, con solución de accesibilidadPaginación sencillaClasificación sencillaBúsqueda
programar
es
https://aprendeprogramando.es/static/images/programar-patrones-de-diseno-de-mesas-en-la-web-964-0.jpg
2024-09-21
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente