Tabla

Componente para ordenar valores relacionados en filas y columnas.

Índice de apartados de esta página

• Anatomía
• Accesibilidad

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.

Tabla avanzada #

La tabla avanzada permite mostrar una gran cantidad de columnas, realizar filtrados, selecciones o cambiar el tipo de ordenación.

Utiliza el patrón de filtros avanzados cuando necesites más complejidad a la hora de encontrar items.

• 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 #

Cómo funciona #

• Etiqueta <table> con role=grid que contiene un <caption> descriptivo, una fila de encabezado <thead>, un cuerpo <tbody> y una fila inferior <tfoot>.
• Cada fila es una etiqueta <tr>.
• Cuando la celda forma parte de la cabecera se trata de un elemento <th> con scope=col o scope=row, un tabindex=-1 que impide que tomen el foco y un id único. El resto de celdas son elementos td.
• 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