Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Elementos de interfaz Componentes Tabla

Tabla

Las tablas se utilizan para organizar y mostrar datos de manera eficiente, permitiendo a los usuarios escanear, ordenar, comparar y tomar medidas sobre ellos.

Vista previa

Vista previa del componente tabla

Usos

Las funciones de la tabla de datos son ideales para organizar y mostrar datos en una interfaz de usuario. Los encabezados de las columnas pueden ordenar los datos en orden ascendente o descendente, las filas se pueden expandir para revelar información progresivamente y se pueden realizar acciones individuales o por lotes en las filas.

Como usar

Para organizar y mostrar datos. Si su usuario debe navegar a un dato específico entre muchos datos. Visualización de todos los elementos de una entidad.

Como no usar

Cuando se requiere una visualización más compleja de los datos o interacciones. Como reemplazo de una aplicación de hoja de cálculo.

Comportamiento

Tipos

Visualización de la tabla por defecto

Default

Visualización de la tabla tipo multiselect

Multiselect

Visualización de la tabla tipo accordion

Accordion

Visualización de la tabla tipo radiobutton

Radiobutton

Visualización de la tabla con secciones

With sections

Tamaño

Visualización de la tabla por defecto

Default

Visualización de la tabla compacta

Compact

Estados

Visualización de la tabla tipo multiselect por defecto

Multiselect

Default

Visualización de la tabla tipo multiselect selection

Multiselect

Selection

Visualización de la tabla tipo accordion por defecto

Accordion

Default

Visualización de la tabla tipo accordion selection

Accordion

Selection

Visualización de la tabla tipo radiobutton por defecto

Radiobutton

Default

Visualización de la tabla tipo radiobutton selection

Radiobutton

Selection

Responsive

En su versión móvil, el comportamiento es el siguiente: solo se muestra la primera celda con el label y el contenido, a esta celda le acompaña el chevron para poder desplegar el resto del contenido de la fila. Las filas podrán contener los datos de una columna o dos dependiendo de la configuración del componente.

Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 1

Mobile collapse - 1 data

Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 2

Mobile expand - 1 data

Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 3

Mobile collapse - 2 data

Visualización del comportamiento de la tabla en pantallas tamaño móvil - ejemplo 4

Mobile expand - 2 data

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

La tabla se construye con el etiquetado nativo: table, thead, tbody, tr, th y td. Los encabezados de tabla no deben estar vacíos.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

 Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web