Componentes reutilizables

Información adicional

Uso de tablas simples

Todas las tablas van dentro de un div con la clase Table-wrapper, esto hace que en caso que deba mostrarse más ancha que su contenedor padre, se aplica un scroll horizontal. En el caso de mobile sigue funcionando, aunque es esperado que la tabla pase a su formato responsivo con el uso de la clase Table--responsive.

Modificadores de tablas

• Table--responsive
• Table--striped
• Table--borderless
• Table--middle
• Table--small
• También se pueden aplicar modificadores de texto, a toda la tabla o por celda. Por ejemplo u-textSmall, u-textRight, etc.

Accesibilidad de tablas

Es indispensable diferenciar las tablas entre si, especialmente en las páginas donde puede encontrarse más de una. Para esto se tendrán en cuenta los elementos de HTML5 y el criterio de los lectores de pantalla.

• El título de la tabla irá dentro de la etiqueta caption, que se ubica justo después de la etiqueta table.
• La descripción de la tabla se ubicara en un elemento de párrafo, con un id específico que permita asociarlo a la tabla. Para esto se agrega en la etiqueta table lo siguiente: aria-describedby="idDeLaDescripcion". Puede ubicarse por encima o por debajo, mientras cumpla la condición anterior.
• Además de usar la estructura conocida de las tablas, se debe identificar las columnas como tales agregando scope="col" en los elementos del cabezal.
• Se espera que los contenidos de las celdas "td" tengan asociado en nombre de la columna a la que pertenecen mediante data-title="Nombre Columna".

Ejemplos de tablas