Chen Hui Jing ha abordado una tonelada de patrones de diseño para tablas que pueden resultar útiles al crear tablas fáciles de leer y receptivas para la web:
Hay 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 final del día, las tablas son un método para la organización y presentación de datos. Es importante averiguar qué información es más importante para los usuarios y decidir el enfoque que mejor se adapte a sus necesidades.
Esto me recuerda cuando Chris escribió sobre las tablas de datos sensibles y lo difícil que es hacerlo bien. También hay una gran publicación de Richard Rutter en una línea similar donde escribe sobre la legibilidad de las tablas y la tipografía fina:
Muchas tablas, como los estados financieros o los horarios, se componen principalmente de números. En términos generales, su propósito es proporcionar al lector datos numéricos, presentados en columnas o filas y, a veces, en una matriz de los dos. Su lector puede usar la tabla escaneando las columnas, ya sea buscando un punto de datos o haciendo comparaciones entre números. Su lector también puede dar sentido a los datos simplemente mirando la columna o la fila. Es mucho más fácil comparar números si las unidades, las decenas y las centenas están todas alineadas verticalmente; es decir, todos los dígitos deben ocupar exactamente el mismo ancho.
Uno de mis patrones de tabla favoritos que ahora uso constantemente es uno con un encabezado fijo. Me gusta esta demostración aquí:
ver la pluma
Table Sticky Header por Robin Rendle (@robinrendle)
en CodePen.
Como usuario, encuentro que cuando me desplazo por grandes tablas de datos con información compleja, tiendo a olvidar de qué se trata una columna y luego tendré que desplazarme hasta la parte superior nuevamente para lea el encabezado de la columna.
De todos modos, todo esto me hace pensar que me leería un maldito libro entero sobre el tema de la <table> elemento y cómo diseñar datos con precisión y capacidad de respuesta.
Enlace directo →