En una pantalla grande, tres ofertas caben cómodamente una al lado de otra. En un teléfono, la misma tabla puede convertirse en cifras diminutas o en una tira larga cuyos nombres de columna han desaparecido. La anchura es solo parte del problema: los lectores deben recordar qué están comparando. Empieza por preguntar qué diferencia necesitan encontrar, en lugar de reducir la tipografía.
Define primero la tarea
Imagina que comparas tres programas de formación. Las diferencias útiles podrían ser la modalidad de enseñanza, la duración y los conocimientos previos necesarios. Coloca la descripción promocional de cada programa fuera de la tabla. Una celda que contiene condiciones, excepciones y la biografía de un profesor ya no es un punto de comparación conciso. Separa los hechos de las explicaciones, pero no ocultes restricciones que cambien el sentido de una oferta.
Mantén conectadas las etiquetas y los valores
El W3C recomienda marcar los encabezados de tabla y las celdas de datos con los elementos HTML adecuados. Las relaciones más complejas pueden requerir atributos adicionales. Poner la primera fila en negrita no comunica por sí solo esa estructura a la tecnología de asistencia. Da a la tabla un nombre claro, indica las unidades de medida y representa los valores desconocidos de forma coherente. Una celda vacía no debería significar tácitamente tanto «gratis» como «no incluido».
Elige entre desplazamiento y tarjetas
Cuando alguien necesita comparar una característica entre varias opciones, una tabla conservada con desplazamiento horizontal puede funcionar mejor que una larga secuencia de tarjetas. Haz evidente la zona desplazable y prueba el acceso sin gestos táctiles. Si los visitantes suelen leer cada oferta por separado, las tarjetas pueden resultar más sencillas. Repite las etiquetas de las características dentro de cada tarjeta, no solo los valores. Es una elección editorial, no una regla universal para todas las tablas.
No hagas que toda la página se comporte como una tabla
La explicación del W3C sobre la redistribución del contenido admite una excepción para la información que necesita una disposición bidimensional para comprenderse. No es un permiso para que toda la página se desplace lateralmente. El texto introductorio, los botones y las secciones posteriores deben seguir siendo cómodos en una pantalla estrecha. Incluso dentro de una tabla, permite que las explicaciones largas ocupen varias líneas en lugar de reducirlas a una letra apenas legible.
Prueba la decisión, no solo la imagen
En una pantalla estrecha, encuentra una diferencia concreta entre dos opciones. Después aumenta el zoom, recorre los controles disponibles con un teclado y comprueba cómo se leen los encabezados con tecnología de asistencia. Tras desplazarte, ¿está claro a qué opción pertenece una cifra? ¿Son idénticos los datos en escritorio y móvil? Si responder exige recordar varias pantallas, simplifica la estructura. Una buena comparación ahorra esfuerzo, no solo espacio.