Tablas

Tipos de tabla

Tabla al 100 %: ocupa el total de la grilla de 12 columnas de Obelisco y se utiliza en desktop.
Tabla al 75 %: ocupa 8 columnas de la grilla de Obelisco y se utiliza en desktop.
Tabla mobile: ocupa el total del ancho del dispositivo y se utiliza para dispositivos móviles, incluyendo tablet.

completar

Anatomía

La tabla se compone de celdas y filas con diferentes variantes según el contenido.

Celdas de encabezado

Dan cuenta de los datos que aparecerán dentro de la columna. Puede contar con un subtítulo breve como asistencia. En caso de superar los caracteres máximos, el texto se trunca. Todas se alinean a la izquierda.

completar

Celdas de contenido

Pueden contener diferentes tipos de información como texto, números, etiquetas, enlaces y botones (CTAs).

completar

Fila de tabla

Puede estar conformada por celdas de contenido o celdas de encabezado. Tienen un ancho fijo para todos los tamaños de la tabla y, cuando no se muestra completa, aparece la barra de desplazamiento para visualizar el resto del contenido. Pueden tener fondo primario o secundario para generar un patrón de cebra que facilite la legibilidad. Esta diferencia de fondo genera un contraste que ayuda al ojo a seguir la información de la fila sin perderla de vista.

completar

Especificaciones

Comportamiento de scroll

En mobile, o cuando se pasa el tamaño máximo del contenedor especificado dentro de la grilla desktop, la tabla de scrollea horizontalmente.

completar

Combinación con otros componentes

Las tablas pueden combinarse como organismo con otros componentes como buscadores, filtros, botones, desplegables y paginado. Se sugiere disponerlos de la manera ilustrada respetando los espaciados.

completar

Usabilidad

Buenas prácticas

Utilizar la menor cantidad de columnas en una tabla para disminuir la carga cognitiva de la persona usuaria y facilitar la legibilidad en dispositivos pequeños. Se sugiere incluir un máximo de 5 columnas por tabla (sin contar la casilla de selección o checkbox).

Si se utiliza una tabla con el patrón de cebra, alternando entre filas de contenido con fondo de color primario y fondo de color secundario, la primera fila de contenido siempre debe tener fondo de color primario para distinguirse de la fila de encabezado.

Los textos de las celdas deben ser breves y dar cuenta del tipo de datos que aparecerán luego en la tabla.

Las celdas de contenido de texto tienen un máximo de 105 caracteres permitidos. No se recomienda superar este límite, ya que podría romper la estructura de la tabla.

Las celdas de encabezado se alinean a la izquierda. Los títulos tienen un máximo de 55 caracteres y los subtítulos tienen un máximo de 65 caracteres; en caso de superar el máximo permitido, los textos se truncarán.

Las celdas de contenido numérico se alinean a la derecha, exceptuando las fechas y números de teléfono. Las fechas y números de teléfono se consideran celdas de texto aunque estén o no expresadas en números.

Malas prácticas

No utilizar la tabla si no se tienen al menos 2 columnas de información.

No utilizar la tabla para estructurar contenido a modo de grilla. Para estructurar información relacionada se sugiere utilizar tarjetas o listas.

No combinar diferentes tipos de enlaces en una misma columna.

No combinar botones primarios con botones de ícono en una misma tabla.

No utilizar botones de descarga en una tabla. En ese caso, utilizar enlaces de descarga.