Índice de apartados de esta página
Tabla
Componente para ordenar valores relacionados en filas y columnas.
Anatomía #
| 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 #
- 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úrtate de que los datos pueden visualizarse en anchuras pequeñas. Utiliza scroll y coloca los botones de desplazamiento al principio de la tabla.