Tabla
Skip to main content
Careers Contact us

Tabla

Biblioteca de componentes

Cómo usar este componente

Utiliza el componente Tabla para mostrar y organizar los datos de forma eficaz. Selecciona este componente siempre que necesites presentar datos tabulares de forma clara y accesible.

El componente Tabla muestra datos estructurados en formato de cuadrícula, con opciones para cabeceras, ordenación y funcionalidad de búsqueda.

Componente de tabla actualizada

Anatomía de la mesa

  1. Título
  2. Descripción
  3. Búsqueda
  4. Fila superior del encabezado / Columna del encabezado izquierdo
  5. Cuerpo de la mesa
  6. Paginación
Desglose visual de un componente de la tabla, mostrando elementos clave como cabeceras de columnas, indicadores ordenables, filas de datos, entrada de búsqueda y paginación

Mejores prácticas

  • Activa el campo de búsqueda para tablas más grandes y así mejorar la navegación de datos.
  • Seguir las convenciones de encabezado (H2– H6) para el nivel de encabezado del título de la tabla. 
  • Utiliza múltiples componentes de tabla para conjuntos de datos distintos y así mejorar la claridad.
  • Organiza tablas con una fila superior de cabecera o una columna de cabecera izquierda para mayor accesibilidad.
  • No uses tablas para fines de maquetación; utiliza el componente de Layout de Columnas en su lugar.
  • No combines varias tablas en un solo componente.

Ejemplos

Mal ejemplo:

  1. La tabla incluye una fila de cabecera vacía, lo que reduce la claridad y accesibilidad.
  2. Múltiples conjuntos de datos distintos se combinan en una sola tabla, lo que dificulta la exploración y comprensión del contenido.
  3. Las celdas se fusionan sin un propósito estructural claro, lo que dificulta escanear e interpretar la tabla. Por ejemplo, se utiliza una sola celda fusionada en lugar de entradas distintas como "Fila 1 – Columna 3," "Fila 2 – Columna 3" y "Fila 3 – Columna 3." Esto reduce la claridad y puede afectar al soporte de lectores de pantalla.
La tabla incluye una fila de cabecera vacía, celdas fusionadas y múltiples conjuntos de datos combinados en una única estructura, reduciendo la claridad y accesibilidad.

Mal ejemplo:

  • La tabla se utiliza para replicar un componente de Layout de Columna y presentar contenido en estilo lista, en lugar de usar una lista con viñetas u ordenada.
La tabla se utiliza para replicar la disposición de una columna y presentar contenido en estilo de lista, en lugar de usar componentes apropiados de diseño o lista.

Buen ejemplo: La tabla utiliza filas o columnas de encabezado claro, con cada punto de datos presentado en su propia celda para mantener la estructura, legibilidad y accesibilidad.

La tabla utiliza una fila superior clara con columnas ordenables, lo que permite la visualización de datos estructurados y una comparación más sencilla entre filas.
La tabla utiliza una columna de encabezado izquierda clara para organizar los datos de filas relacionados, permitiendo un diseño estructurado y un escaneo sencillo.

Ubicación

Las tablas pueden colocarse en cualquier lugar debajo del título H1 en la página, pero asegúrate de que las tablas tengan suficiente ancho de columna.

Características de la tabla

Las tablas permiten añadir imágenes dentro de las celdas para añadir contexto adicional; Abre el panel lateral del activo y arrastra y suelta las imágenes en la celda deseada.

Directrices de accesibilidad

  • Al redactar la tabla, asegúrate de darle un título único y descriptivo.
  • Asegúrate de que las tablas estén organizadas con una cabecera clara, fila o columna.
  • Los encabezados deben describir los datos a los que pertenecen, mejorando la navegación en lectores de pantalla.
  • Evita usar tablas para datos no tabulares para evitar problemas de accesibilidad; esto significa que no uses tablas solo para el diseño de páginas.
  • Si se añade una imagen a una celda de una tabla, asegúrate de aplicarle texto alternativo en el editor de componentes de la tabla y de escribir un pie de foto en la celda que contenga la imagen para que sea buscable.
  • Si hay enlaces en la tabla, asegúrate de que tengan texto único y descriptivo, y que estén subrayados.

Lista de verificación para Coordinador Web

  • Asegúrate de que haya una fila o columna de cabecera presente y describa con precisión los datos.
  • Activa el campo de búsqueda de tablas con más de tres filas.
  • Evita anchos de columna fijos; Asegúrate de que la tabla se ajuste a diferentes ventanas de visualización.

Actualizado el 20 de mayo de 2026