Índice de páginas
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.
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.
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>
conrole=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>
conscope=col
oscope=row
, mientras que en el resto de celdas son elementostd
. Además, las celdas de cabecera tienen untabindex=-1
que impide que el foco entre en ellas y unid
ú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 conrole=button
. Los iconos de filtrado poseen aria=hidden y una etiqueta con.sr-only
que indicaPulsa 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 conid
ú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é 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. |