Web ResponsiveComponents
Tables

Tables

Las tablas son elementos que puedes usar para agrupar información en filas y columnas. Puedes usar diferentes tipos de tablas en función a la información que necesites mostrar y aplicarles diferentes estilos para resaltar unos elementos u otros. Aplica las tablats a tus diseños tanto para desktop como móvil para mantener la información ordenada y fácilmente accesible.

Tables default

Las tablas que debes usar por defecto han de tener el fondo de todas sus celdas en blanco y el texto en negro. También puedes usar el color gris (Soft Script) para los textos de las celdas que no sean titulares y aplicar un efecto hover de color azul (Day Blue) con texto blanco para resaltar aquellas celdas o filas que sean clicables. Divide las tablas en celdas o filas en función a las acciones que quieras que el usuario haga a partir de la información que muestres.

Tablas default divididas en celdas y filas.

Estilos

Puedes combinar los colores Day Blue, Dark Silk, Dark shiro o Darkest Shiro y aplicarlos a los titulares, fondos de las celdas y dividers para crear diferentes resultados. Debes procurar que haya suficiente contraste entre el texto y el fondo para mantener la legibilidad.

Diferentes estilos aplicados a las celdas, dividers y textos.

Avisos

Aplica fondos de color a las celdas o filas de la tabla cuando quieras mostrar al usuario algún aviso referente a los datos o simplemente resaltar un elemento respecto al resto.

Los colores que puedes usar son los mismos que están disponibles para los toasts. En este caso debes aplicar los colores totalmente opacos. No uses los colores de aviso en una tabla como colores alternativos para el estado hover.

Usa los mismos colores que en los toasts para resaltar la información de una celda o fila.

Tablas en el móvil

Para visualizar las tablas de manera correcta en un dispositivo móvil debes reestructurar ligeramente el contenido. Las columnas deben pasar a formar parte de una misma celda, y como titular debes definir un nombre para la tabla, que no se mostrará en la versión desktop pero sí en la móvil.

Puedes usar el título de las columans al lado de los campos o no en función a la información. Piensa que habrá datos que se entenderán sin necesidad de un título, pero habrá otros que no.

En cuanto a los estilos recuerda que debes mantener los mismos que estuvieras usando para la versión desktop de esa misma tabla.

En la versión móvil las columnas de la tabla pasan a formar parte de la misma celda.
Recuerda mantener los mismos estilos en la versión móvil que las que uses para la versión desktop.