Diseño de tablas de datos: alineación, densidad y acciones que facilitan el trabajo

Una gestoría con la que trabajamos tenía en su área de clientes un listado de facturas impecable a la vista: tipografía elegante, mucho aire, colores de marca. Y, sin embargo, la mitad de sus clientes pulsaba «Exportar a Excel» nada más entrar. Cuando les preguntamos por qué, la respuesta fue casi siempre la misma: «Ahí lo encuentro antes». En Excel los importes se alineaban, podían ordenar por fecha y veían veinte facturas sin desplazarse. La tabla de la web era bonita, pero no era una herramienta.

Las tablas de datos son el componente menos glamuroso de una interfaz y uno de los que más tiempo pasan delante de los ojos de quien trabaja con ella. Pedidos, reservas, facturas, inventario, leads, pacientes. Diseñarlas bien significa entender que una tabla se usa más de lo que se mira, y que cada decisión de alineación, altura de fila o posición de un botón se repite cientos de veces al día.

En esta guía recogemos los criterios que aplicamos cuando diseñamos tablas para paneles, intranets y áreas privadas: desde dónde se alinea un número hasta cómo se ve todo eso en un móvil.

01Para qué sirve una tabla: las cuatro tareas que tiene que resolver

Antes de dibujar columnas conviene saber qué va a hacer la gente con ellas. El Nielsen Norman Group agrupa el uso de las tablas de datos en cuatro grandes tareas, y es una lista muy útil como punto de partida:

1. 01Encontrar registros que cumplen ciertos criterios (las facturas pendientes de marzo, los pedidos de un cliente).
2. 02Comparar datos entre filas (qué producto se vende más, qué reserva es más cara).
3. 03Ver o editar una fila concreta en detalle.
4. 04Actuar sobre registros, uno a uno o en grupo (aprobar, descargar, archivar).

Cada tarea pide un recurso de diseño distinto. Encontrar se resuelve con búsqueda, filtros y ordenación. Comparar, con alineación impecable y una densidad adecuada. Ver detalle, con un acceso claro desde cada fila. Actuar, con acciones bien ubicadas y una selección múltiple comprensible. Si al empezar un proyecto apuntamos cuál de las cuatro pesa más, la mitad de las decisiones vienen solas.

Y una pregunta previa: ¿es realmente una tabla? Si cada elemento es muy visual y se compara poco, quizá funcionen mejor las tarjetas, como contamos en la guía de tarjetas en UI. La tabla brilla cuando hay varios atributos que comparar en paralelo.

02Alineación: la regla que pone orden en cualquier tabla

Si solo pudieras aplicar un consejo de esta guía, que sea este. La alineación correcta convierte una tabla confusa en una tabla legible sin cambiar nada más.

• →Texto a la izquierda. Nombres, descripciones, estados, emails. En español leemos de izquierda a derecha y el inicio de la palabra es lo que identifica.
• →Números a la derecha. Importes, cantidades, porcentajes. Así las unidades quedan alineadas y se comparan magnitudes de un vistazo: 1.250,00 € y 98,50 € se distinguen sin leer.
• →Mismo número de decimales en toda la columna, y la unidad o el símbolo de moneda siempre en la misma posición (o en la cabecera, si es común a toda la columna).
• →Cabecera alineada como su contenido. Una cabecera centrada sobre una columna alineada a la derecha rompe la línea vertical que guía al ojo.
• →Centrado, solo para elementos cortos de ancho fijo, como un icono de estado o una casilla. El texto y los números centrados crean bordes irregulares por ambos lados.

Un detalle tipográfico que marca mucho la diferencia son las cifras tabulares. Muchas fuentes usan por defecto cifras proporcionales, donde el 1 es más estrecho que el 8, y eso hace que una columna de números baile. Con una línea de CSS se corrige:

.data-table td.num, .data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table td { padding: 12px 16px; vertical-align: middle; }
.data-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }

Las fechas merecen su propio criterio. Un formato corto y constante (14/04/2026 o 14 abr 2026) funciona mejor que fechas relativas tipo «hace 3 días» cuando hay que ordenar o comparar. Las relativas encajan en feeds de actividad; en una tabla de trabajo, la fecha exacta da más seguridad.

03Densidad: elegir la altura de fila según quién y cuánto la usa

La densidad es la cantidad de información que cabe en pantalla. Una tabla demasiado espaciada obliga a desplazarse sin parar; una demasiado apretada cansa y provoca clics en la fila equivocada. No hay una densidad correcta universal: depende de cuánto tiempo pasa la persona con la tabla y de qué dispositivo usa.

En nuestros proyectos solemos empezar por la densidad estándar y ofrecemos un selector de densidad cuando hay perfiles muy distintos usando la misma herramienta: el equipo de administración agradece la compacta y el comercial que la consulta desde la tablet, la estándar. Gmail, Google Drive y la mayoría de herramientas de gestión siguen esta lógica.

Para separar filas, una línea horizontal fina de bajo contraste suele bastar. Las filas cebra (alternar un fondo muy suave) ayudan en tablas anchas, con muchas columnas, donde el ojo pierde la fila al recorrerla. Y el estado hover de la fila, con un fondo algo más marcado, es una ayuda continua para no perderse. Bordes verticales, en general, pocos: el espacio entre columnas y la alineación ya separan.

El relleno horizontal de las celdas, entre 12 y 16 px, encaja bien en un sistema de espaciado de 8 puntos. Y la tipografía de la tabla suele ir uno o dos puntos por debajo del texto de lectura, normalmente entre 13 y 15 px, con una fuente con buena legibilidad en tamaños pequeños.

04Cabeceras, ordenación y filtros: encontrar sin buscar

Cabeceras que se quedan

En tablas largas, la cabecera fija (sticky) es casi imprescindible: al bajar cien filas, el usuario sigue sabiendo qué es cada columna. Si la tabla tiene muchas columnas y desplazamiento horizontal, fijar también la primera (el identificador, el nombre del cliente) permite no perder la referencia.

Los títulos de columna, cortos y concretos: «Importe», «Fecha de pedido», «Estado». Si hace falta una unidad, entre paréntesis: «Peso (kg)». Y evita las mayúsculas sostenidas en cabeceras largas, porque se leen peor.

Ordenación visible

Las columnas ordenables necesitan un indicador claro: una flecha que muestre la dirección actual y una pista visual (al pasar el ratón) en las que aún no están ordenadas. La columna activa conviene que se distinga, por ejemplo con el título en un peso mayor. Y el orden por defecto debería responder a la tarea principal: lo más reciente arriba en pedidos, lo más urgente arriba en incidencias.

Filtros cerca de lo que filtran

Una barra de búsqueda y filtros encima de la tabla, con los filtros activos visibles como etiquetas que se pueden quitar de una en una, y un contador de resultados («38 de 1.204 pedidos»). Ese contador parece un detalle menor y da mucha tranquilidad: el usuario sabe que el filtro ha funcionado. Para profundizar en esta parte, la guía sobre búsqueda interna cubre autocompletado y resultados vacíos.

05Acciones: por fila, en lote y en línea

Una tabla de gestión casi siempre permite hacer cosas. La cuestión es dónde ponerlas para que estén a mano sin llenar cada fila de botones.

Acciones por fila

Si hay una sola acción frecuente (ver, descargar), puede ir como enlace o botón al final de la fila. Si hay varias, lo habitual es mostrar la más usada y agrupar el resto en un menú de tres puntos. Mostrar las acciones solo al pasar el ratón limpia mucho la tabla en escritorio, pero en pantallas táctiles no existe el hover, así que conviene que el menú esté siempre visible. Y que el área de cada icono de acción respete al menos los 24×24 px que pide WCAG 2.2 en su criterio 2.5.8.

Acciones en lote

Una columna de casillas a la izquierda, una casilla en la cabecera para seleccionar todo y, al seleccionar, una barra contextual que aparece encima de la tabla con el número de elementos y las acciones disponibles: «3 seleccionados · Descargar · Marcar como pagado · Archivar». Esa barra es más clara que dejar los botones siempre visibles y desactivados.

Para acciones que no se pueden deshacer, como eliminar, una confirmación clara o, mejor aún, la posibilidad de deshacer durante unos segundos. Hablamos de ese patrón en la guía de modales y diálogos.

Edición en línea

Para cambios rápidos (un estado, una cantidad), editar directamente en la celda ahorra muchos pasos. La celda tiene que indicar que es editable (un icono de lápiz al pasar o un leve subrayado), mostrar el campo con su foco al hacer clic, guardar con Intro y cancelar con Escape. Para ediciones de varios campos, mejor un panel lateral que abra el registro completo sin perder la tabla de vista.

06Tablas en el móvil sin perder información

La pantalla del móvil obliga a elegir. Estos son los tres patrones que más usamos, y la clave para decidir es si el usuario compara filas o consulta registros sueltos:

• →Desplazamiento horizontal con primera columna fija. Mantiene la tabla intacta y permite comparar. Encaja en tablas con pocas filas y muchas columnas, como un comparador de tarifas. Conviene que la última columna visible quede cortada a la mitad, para que se intuya que hay más.
• →Columnas prioritarias y acceso al detalle. Se muestran dos o tres columnas clave y cada fila abre el registro completo. Es lo más habitual en listados de pedidos o reservas.
• →Filas convertidas en bloques. Cada registro se presenta como un pequeño bloque con etiqueta y valor. Funciona bien para consultar, peor para comparar.

En cualquiera de los casos, las acciones de cada fila necesitan un área táctil cómoda, idealmente de 44×44 px, y la selección múltiple suele activarse con un modo específico («Seleccionar») en lugar de casillas siempre visibles.

07HTML accesible: la tabla también se escucha

Una tabla bien construida en HTML se puede recorrer con un lector de pantalla celda a celda, y el lector anuncia la cabecera de fila y de columna de cada dato. Para eso basta con usar los elementos correctos:

<table class="data-table">
  <caption>Facturas emitidas · 38 resultados</caption>
  <thead>
    <tr>
      <th scope="col" aria-sort="descending"><button>Fecha</button></th>
      <th scope="col">Cliente</th>
      <th scope="col" class="num">Importe</th>
      <th scope="col">Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>14/04/2026</td>
      <th scope="row">Restaurante del puerto</th>
      <td class="num">1.250,00 €</td>
      <td><span class="badge badge--pending">Pendiente</span></td>
    </tr>
  </tbody>
</table>

Algunos detalles: el caption da nombre a la tabla y es lo primero que escucha quien la recorre. El atributo aria-sort va en la propia cabecera (th) e indica el orden actual; el botón interior se encarga solo de la interacción y es lo que recibe el foco del teclado. Y los estados con color (pendiente, pagada, vencida) siempre llevan texto, porque el color por sí solo no transmite información a todas las personas, como recoge el criterio 1.4.1 de WCAG. Si quieres repasar las bases, en qué es la accesibilidad web lo explicamos paso a paso.

08Ejemplo resuelto: el listado de pedidos de una tienda online

Una tienda de productos gourmet de la costa nos pidió revisar su panel de pedidos. Tenía doce columnas, todas con el mismo peso, y el equipo tardaba en encontrar los pedidos que tenía que preparar ese día. Así lo reordenamos:

1. 01Definimos la tarea principal: preparar y enviar los pedidos del día. El orden por defecto pasó a ser «pendientes de envío, más antiguos primero».
2. 02Redujimos a siete columnas visibles: número de pedido, fecha, cliente, artículos, importe, estado y acción. El resto (dirección completa, método de pago, notas) se abre en un panel lateral.
3. 03Alineamos y formateamos: importes a la derecha con cifras tabulares, fechas cortas y estados con etiqueta de texto y color.
4. 04Elegimos densidad estándar con opción compacta para el administrador, que revisa cientos de pedidos a final de mes.
5. 05Añadimos acciones en lote: seleccionar varios pedidos y marcar como enviados o imprimir etiquetas en un solo paso.
6. 06Preparamos la versión móvil con número, cliente, importe y estado, y acceso al detalle, para consultas rápidas desde el almacén.

El panel pasó de ser un lugar donde buscar a un lugar donde trabajar. Y el botón de exportar quedó, pero para lo que de verdad sirve: llevar los datos a contabilidad.

09Tablas que se convierten en herramienta

Las tablas premian la disciplina: alinear bien, decidir qué columnas importan, situar las acciones donde se esperan y construirlas con HTML semántico. Ninguna de esas decisiones luce en un portfolio, pero todas se notan en el día a día de quien la usa, que es al final para quien diseñamos.

En SIMA diseñamos y desarrollamos paneles, áreas privadas y herramientas internas dentro de nuestro servicio de desarrollo web y apps, siempre partiendo de cómo trabaja de verdad el equipo que las va a usar. Si tu panel tiene más exportaciones a Excel de las que te gustaría, escríbenos y vemos cómo convertirlo en una herramienta cómoda.