DESY

Sistema de Diseño del Gobierno de Aragón

Tabla

Componente para ordenar valores relacionados en filas y columnas.

Índice de apartados de esta página

Anatomía

Tabla simple

Utiliza la tabla simple para mostrar contenido en un número limitado de filas y columnas.

En anchuras pequeñas las celdas se apilan junto con el encabezado que les corresponde.

Título de la tabla
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€

Tabla avanzada

Utiliza la tabla avanzada cuando necesitas mostrar una gran cantidad de columnas, realizar filtrados, selecciones o cambiar el tipo de ordenación.

Título de tabla
Seleccionar fila Filas Etiqueta de filtro 1 Pulsa para ordenar por esta columna Etiqueta de filtro 2 Pulsa para ordenar por esta columna Etiqueta de filtro 3 Pulsa para ordenar por esta columna
Fila 1 Enero 85€ 95€
Fila 2 Febrero 75€ 55€
Fila 3 Marzo 165€ 125€
  • Título de tabla: Caption que debe ser visible o, en su defecto, estar únicamente disponible para lectores de pantalla.
  • Cabecera de la tabla: Define la información de las columnas. Opcionalmente, si existe un alto número de filas, puede contener elementos de filtrado como selectores, barras de búsqueda y botones de ordenación ascendente/descendente.
  • Botones de selección: Opcionalmente para cada fila, se pueden incluir inputs de selección múltiple o selección única dependiendo de las acciones que deba ejercer el usuario sobre los distintos items.
  • Filas: Relacionan cada término con uno o varios parámetros del mismo. Pueden añadirse botones en las últimas celdas de cada fila para realizar acciones sobre los items.

Accesibilidad

Recuerda

  • Para que tu tabla sea accesible, consulta el patrón de acciones de tabla para saber cómo mostrar información adicional y realizar acciones en lote.
  • Establece el orden predeterminado por el que se muestran los datos a través del icono accionable de la etiqueta en la cabecera de la columna (flecha arriba o flecha abajo).
  • Asegúrate de que los datos pueden visualizarse en anchuras pequeñas. Utiliza scroll y coloca los botones de desplazamiento al principio de la tabla.
  • No utilices tablas como elemento de maquetación.

Cómo funciona

  • Elemento <table> con role=grid que contiene un <caption> descriptivo, una fila de encabezado <thead>, un cuerpo <tbody> y una fila inferior <tfoot>.
  • Cada elemento contiene una serie de celdas dentro de una fila <tr>. Cuando la celda forma parte de la cabecera se trata de un elemento <th> con scope=col o scope=row, mientras que en el resto de celdas son elementos td. Además, las celdas de cabecera tienen un tabindex=-1 que impide que el foco entre en ellas y un id único.
  • En una columna ordenable, la celda de cabecera con el accionable necesita un aria-sort que indique si el orden es ascendente, descendente o no existe. La etiqueta accionable se encuentra dentro de un contenedor con role=button. Los iconos de filtrado poseen aria=hidden y una etiqueta con .sr-only que indica Pulsa para ordenar por esta columna
  • En el caso de que se configuren otros inputs, deben llevar label visible o con .sr-only y estar identificados con id único.
  • Cuando el foco entra en la tabla, la persona puede navegar entre las celdas con las flechas de direccción.

Basado en el patrón table de W3C

Qué tener en cuenta
Qué usar Dónde Función
idPrefix Parámetro Nunjucks dentro del componente Permite crear id únicos para celdas de cabecera e inputs.
caption Parámetro Nunjucks dentro del componente Describe la tabla con un título como encabezado. Siempre debe estar.