Tablas Comparativas: Formato y Ejemplos
Construye tablas comparativas que ayudan a los lectores a decidir y a los motores de respuesta a extraer hechos mediante marcado semántico, dimensiones completas, celdas claras y datos actualizados.
Una tabla comparativa evalúa cada opción frente a las mismas dimensiones de decisión, de modo que un lector pueda ver diferencias significativas sin tener que reconstruirlas a partir de párrafos separados. Es uno de los elementos de página de mayor valor para la conversión y la extracción por parte de motores de respuesta, pero solo cuando se publica como datos y no como una imagen de datos.
| Dimensión de decisión | Northstar | Relay | Postbox |
|---|---|---|---|
| Precio mensual, 10 usuarios | $90 | $120 | No disponible |
| Flujo de aprobación | Incluido | Incluido | No disponible |
| Contrato mínimo | Mensual | Anual | Desconocido |
Leyenda: «Incluido» significa que la capacidad forma parte del plan indicado sin un complemento adicional. «No disponible» significa que el proveedor no la ofrece en ese plan. «Desconocido» significa que la afirmación no pudo verificarse a partir de la fuente mencionada. Los nombres y cifras anteriores son ilustrativos; la estructura es el modelo de producción.
Por qué este elemento es importante
La comparación genera trabajo cognitivo. Cuando tres productos se describen en tres secciones separadas, el lector debe recordar cada precio, normalizar redacciones diferentes y decidir si una característica omitida está ausente o simplemente no se menciona. Una tabla elimina esa tarea de memoria. Sus filas declaran las dimensiones de decisión, sus columnas contienen las opciones y cada intersección proporciona la respuesta. El lector puede recorrer una opción o un criterio sin perder la relación.
Esa estructura también mejora la extractabilidad mecánica: la capacidad de un sistema de búsqueda o motor de respuesta para preservar la relación entre una etiqueta y su valor al reutilizar contenido. Una fila de encabezado clara, encabezados de fila explícitos, un dato por celda y dimensiones completas crean un conjunto compacto de declaraciones sujeto–predicado–valor. «Relay — contrato mínimo — anual» es fácil de aislar y citar. Un diseño de tarjetas de colores que contenga las mismas palabras puede parecer una tabla a un visitante vidente, pero no expone relaciones fiables de filas y columnas.
Una imagen de una tabla no es una tabla comparativa. Es una captura de pantalla que contiene texto. Una persona que usa un lector de pantalla no puede navegar por sus encabezados y celdas. Un lector no puede copiar un precio limpiamente, buscar dentro de ella, agrandar el texto sin agrandar toda la imagen ni adaptarla a una pantalla estrecha. Los rastreadores y motores de respuesta pueden intentar el reconocimiento óptico de caracteres, pero incluso un reconocimiento exitoso no garantiza que el valor correcto permanezca vinculado a la fila y columna correctas. Del mismo modo, un conjunto de elementos div con estilo puede imitar una cuadrícula descartando la semántica de la tabla. El costo es directo: la página invierte esfuerzo de investigación en producir hechos y luego oculta sus relaciones a muchas personas y máquinas.
Cuándo usarla
Usa una tabla comparativa cuando los lectores deban evaluar al menos dos opciones frente a al menos tres dimensiones compartidas. Los temas adecuados incluyen productos, planes, métodos, niveles de servicio, especificaciones técnicas, reglas de elegibilidad y una lista clasificada breve. Las dimensiones deben ser comparables: precio frente a precio, canal de soporte frente a canal de soporte y plazo del contrato frente a plazo del contrato.
No la uses solo porque varios datos quepan en filas. Una lista de dos columnas con etiqueta y valor sobre un solo objeto es una tabla de especificaciones, no una comparación. Un horario es una tabla de horarios. Una matriz de mediciones sin procesar puede ser una tabla de datos cuyo propósito es el análisis, no la elección. Un argumento narrativo extenso pertenece a la prosa porque una celda no debe contener un mini ensayo.
Los casos límite requieren especial cuidado:
- Criterios diferentes para cada opción: usa primero perfiles separados y luego compara solo los criterios compartidos. Una cuadrícula con dimensiones disparejas crea una ilusión de paridad.
- Un veredicto sin dimensiones de respaldo: usa una recomendación directa y explica el razonamiento. Una tabla de una sola fila añade ceremonia, no claridad.
- Más de cinco columnas de opciones: divide el conjunto por audiencia o usa una tabla filtrable y accesible. Reducir el texto hasta que todo quepa hace que el elemento esté técnicamente presente, pero sea prácticamente inutilizable.
- Una lista visual de verificación de características: usa una tabla solo si cada símbolo tiene un significado definido y cada opción recibe una respuesta para cada fila.
- Datos en vivo que cambian con frecuencia: usa una fuente de datos mantenida y una fecha de verificación visible. Si ningún responsable puede mantenerla actualizada, no publiques la tabla.
Dónde colocarla
Coloca la tabla comparativa principal después de que la página defina la audiencia, el método de selección y las dimensiones, pero antes de las revisiones extensas opción por opción. Los lectores necesitan suficiente contexto para interpretar las filas; no deberían tener que leer toda la página antes de recibir la comparación.
En una página A vs B, la tabla principal normalmente sigue a la respuesta directa y a una nota breve de «cómo comparamos». En una página de lista seleccionada, sigue a los criterios de inclusión y precede a las entradas detalladas. Una tabla de especificaciones más pequeña puede aparecer dentro de una sección de producto, pero no debe contradecir a la tabla principal ni introducir un significado diferente para la misma etiqueta.
No coloques la tabla directamente junto a otra tabla comparativa densa, una llamada a la acción no relacionada o una captura de pantalla a tamaño completo. Las cuadrículas en competencia hacen que la ruta de lectura sea confusa. No insertes un banner promocional entre el título y la tabla, ni una nota de fuente entre una fila y el dato que califica. Mantén el título, la fecha de verificación, la leyenda, la tabla y la nota de fuente como una unidad delimitada. Una llamada a la acción puede seguir al veredicto explicativo, no interrumpir la evidencia.
Anatomía
La imagen etiquetada debe identificar estas regiones sin incorporar las explicaciones en el recurso:
- Título: indica qué se compara, para quién y bajo qué plan o escenario.
- Fecha de verificación: proporciona la fecha exacta en que se verificaron los precios y la disponibilidad.
- Encabezados de columna: nombran las opciones; el primer encabezado nombra la columna de dimensiones de decisión.
- Encabezados de fila: nombran cada dimensión relevante para la decisión.
- Celdas del cuerpo: contienen un dato, un número con su unidad o un símbolo definido.
- Columna destacada: indica la recomendación editorial cuando existe; nunca cambia ni oculta los datos subyacentes.
- Leyenda: define cada símbolo y etiqueta de estado en texto visible.
- Nota de fuente: nombra la fuente principal o el método utilizado para verificar las afirmaciones.
Leyenda renderizada: ✓ = disponible en el plan especificado; — = no disponible en ese plan; N/A = la dimensión no aplica; Desconocido = el equipo no pudo verificar el dato. El componente publicado también debe exponer estos significados a la tecnología de asistencia—por ejemplo, texto visible o texto oculto visualmente en cada celda—no depender únicamente de los caracteres.
Ejemplos de diseño
Cada variante utiliza el mismo núcleo semántico. Los tratamientos visuales pueden cambiar el énfasis y la densidad, pero no pueden convertir las celdas en imágenes, eliminar encabezados, fusionar celdas ni codificar significado solo mediante el color.
Estándar: de dos a cuatro opciones, de tres a ocho filas de decisión, sin resalte editorial. Este es el valor predeterminado cuando la página explica compensaciones en lugar de declarar un ganador.
Recomendación destacada: una columna de opciones puede recibir una etiqueta de texto como «Mejor para equipos pequeños». El color es complementario. El resalte no puede cambiar el orden de las filas, ocultar desventajas ni hacer que el texto de otra opción tenga menor contraste.
Basado en símbolos: adecuado para datos binarios repetidos de disponibilidad. Úsalo solo cuando la leyenda sea visible y cada celda conserve un equivalente de texto accesible. Los precios, límites y condiciones permanecen como texto.
Móvil con primera columna fija: la tabla se desplaza horizontalmente dentro de su propio contenedor etiquetado. La página en sí nunca debe adquirir desplazamiento horizontal. Mantén la primera columna fija para que el lector pueda retener la dimensión mientras se mueve entre opciones; conserva el acceso por teclado y un estado de enfoque visible para la región de desplazamiento.
Parámetros
Los parámetros siguientes forman el contrato de contenido portátil. «Fuente» significa de dónde obtiene el autor o el renderizador el valor, no la evidencia citada para una afirmación comercial.
| Nombre | Tipo | Obligatorio | Mín/máx | Valor predeterminado | Fuente |
|---|---|---|---|---|---|
| caption | Cadena de texto simple | Sí | 8–24 palabras | Ninguno | Atributo |
| verification-date | Fecha ISO | Sí | Una fecha exacta | Ninguno | Atributo |
| columns | Lista ordenada | Sí | 3–6 total, incluida la columna de dimensión | Ninguno | Fila de encabezado en el cuerpo |
| rows | Lista ordenada de listas de igual longitud | Sí | 3–10 recomendado | Ninguno | Cuerpo |
| symbol-legend | Mapa de símbolo a texto | Condicional | 1 definición por símbolo o estado | Ninguno | Cuerpo después de la tabla |
| highlight-column | Identificador de columna | No | 0–1 columna de opción | Sin resalte | Atributo |
| source | Texto simple con URL opcional | Sí para afirmaciones externas | 1–3 fuentes principales | Ninguno | Cuerpo después de la leyenda |
Tres columnas de opciones más la columna de encabezado de fila es un valor predeterminado común y legible. Seis columnas en total es el límite normal para una tabla editorial. Un conjunto de datos más grande necesita filtrado o segmentación intencional, no tipografía progresivamente más pequeña.
Sintaxis y ejemplos de código
Las tres formas deben asociarse al mismo título, fecha de verificación, orden de columnas, filas, leyenda y resalte. La tabla de tuberías de Markdown son datos fuente dentro de una directiva tipificada; el elemento externo proporciona metadatos y comportamiento.
Directiva Markdown portátil
:::comparison-table{caption="Plataformas de correo para un equipo de 10 personas" verification-date="2026-08-27" highlight-column="relay"}
| Dimensión de decisión | Northstar | Relay | Postbox |
|---|---:|---:|---:|
| Precio mensual, 10 usuarios | $90 | $120 | No disponible |
| Flujo de aprobación | Incluido | Incluido | No disponible |
| Contrato mínimo | Mensual | Anual | Desconocido |
Leyenda: Incluido = parte del plan indicado; No disponible = ausente del plan; Desconocido = no verificado.
Fuente: páginas de planes y precios del proveedor.
:::
Shortcode de Hugo
El asistente genérico de tablas existente no incluye título, fecha de verificación, ámbito de encabezado de fila, leyenda, fuente ni resalte como campos de primera clase. Hasta que su renderizador cumpla con este contrato, usa HTML semántico para una comparación en vivo en lugar de aceptar una cuadrícula visualmente similar pero estructuralmente incompleta. La asignación prevista de Hugo es:
{{< comparison-table caption="Plataformas de correo para un equipo de 10 personas" verification-date="2026-08-27" highlight-column="relay" >}}
| Dimensión de decisión | Northstar | Relay | Postbox |
|---|---:|---:|---:|
| Precio mensual, 10 usuarios | $90 | $120 | No disponible |
| Flujo de aprobación | Incluido | Incluido | No disponible |
| Contrato mínimo | Mensual | Anual | Desconocido |
Leyenda: Incluido = parte del plan indicado; No disponible = ausente del plan; Desconocido = no verificado.
Fuente: páginas de planes y precios del proveedor.
{{< /comparison-table >}}
El renderizador debe generar un <table class="art-table">, <caption>, <thead> y <tbody> nativos; scope="col" en los encabezados de columna; scope="row" en los encabezados de fila; y una región de desplazamiento horizontal contenida. La notación no es un permiso para sustituir tarjetas o una imagen.
Bloque o shortcode de WordPress
[comparison_table caption="Plataformas de correo para un equipo de 10 personas" verification_date="2026-08-27" highlight_column="relay"]
Dimensión de decisión | Northstar | Relay | Postbox
Precio mensual, 10 usuarios | $90 | $120 | No disponible
Flujo de aprobación | Incluido | Incluido | No disponible
Contrato mínimo | Mensual | Anual | Desconocido
[legend]Incluido = parte del plan indicado; No disponible = ausente del plan; Desconocido = no verificado.[/legend]
[source]Páginas de planes y precios del proveedor.[/source]
[/comparison_table]
Un bloque personalizado de WordPress puede exponer los mismos campos en controles de formulario. Debe guardar o renderizar marcado de tabla nativo y preservar las relaciones cuando los estilos o scripts fallen.
Ejemplos
Bueno: una comparación lista para la decisión
| Dimensión de decisión | Starter | Team | Studio |
|---|---|---|---|
| Precio mensual, 8 asientos | $64 | $96 | $160 |
| Acceso de invitados del cliente | No disponible | 10 invitados | Ilimitado |
| Historial de aprobaciones | 30 días | 1 año | Ilimitado |
| Inicio de sesión único | No disponible | No disponible | Incluido |
Esto funciona porque cada plan responde a cada dimensión de decisión, los números incluyen sus unidades y la suposición de asientos, la ausencia es explícita y la fecha de verificación acota la afirmación. La fila más relevante para la decisión —el precio total para el equipo real— aparece primero. Cada celda contiene un dato en lugar de una afirmación de ventas.
Malo: una cuadrícula de apariencia persuasiva
| Característica | Starter | Team | Studio |
|---|---|---|---|
| Valor | Gran valor | ¡Más popular! | La experiencia definitiva |
| Colaboración | ✓ | ✓ | ✓ |
| Herramientas avanzadas | Potentes | Todo lo que necesitas |
La versión mala falla antes de considerar el estilo. «Gran valor» y «potentes» son frases de marketing sin significado comprobable. La marca de verificación no tiene leyenda. «Herramientas avanzadas» no está definida. La celda vacía de Starter podría significar ausente, no aplica, desconocido u olvidado. «Todo lo que necesitas» agrupa un conjunto ilimitado de afirmaciones en una sola celda. Las filas siguen temas promocionales en lugar de decisiones del comprador, no hay fecha de verificación y no hay fuente.
Repáralo nombrando dimensiones precisas como límite de invitados, período del historial de aprobaciones y disponibilidad de inicio de sesión único; verificando los tres planes en cada fila; reemplazando los espacios en blanco con estados explícitos; definiendo los símbolos; y fechando la revisión. Si esos datos no pueden obtenerse, publica un honesto «Desconocido», no una inferencia favorable.
Marcado de esquema y accesibilidad
No existe un tipo o propiedad general de Schema.org para una tabla comparativa. El elemento sigue siendo parte de la página Article, Product o de colección que lo contiene. Los datos pueden alimentar propiedades válidas de producto, oferta o calificación solo cuando la página cumple de forma independiente las reglas de elegibilidad y evidencia para esos datos estructurados. No conviertas una columna destacada en marcado aggregateRating, review o offers a menos que el contenido subyacente proporcione genuinamente esos valores.
La accesibilidad proviene de las relaciones, no de la apariencia. Usa <th scope="col"> para cada encabezado de opción y <th scope="row"> para cada dimensión de decisión. Añade un <caption> conciso que identifique la tabla. Evita las celdas fusionadas porque rowspan y colspan dificultan la navegación y la extracción; en su lugar, repite una etiqueta o divide la tabla. Mantén el orden de origen lógico y no elimines la tabla del árbol de accesibilidad.
En pantallas pequeñas, coloca el desbordamiento en un contenedor alrededor de la tabla, nunca en la página. Asigna a una región de desplazamiento enfocable por teclado un nombre accesible y un estado de enfoque visible. Una primera columna fija puede ayudar a preservar el contexto, pero no debe cubrir contenido enfocado ni depender de scripts para exponer datos. Los símbolos requieren definiciones de texto visibles y equivalentes de texto a nivel de celda. El color puede resaltar una columna recomendada, pero el encabezado también necesita una etiqueta de texto.
Reglas de redacción
Elige las filas por valor de decisión, no por conveniencia. Coloca primero el criterio con más probabilidades de cambiar la elección del lector, luego las capacidades necesarias, el costo total, las restricciones, el soporte y los detalles secundarios. La ordenación alfabética solo es útil cuando los lectores llegan conociendo el nombre de la dimensión; generalmente es incorrecta para una decisión de compra. El orden de navegación del proveedor es una taxonomía promocional, no una prioridad para el lector.
La paridad de dimensiones es absoluta: cada opción debe evaluarse en cada fila. Un espacio en blanco sigue siendo una respuesta, pero es ambigua, por lo que los espacios en blanco están prohibidos en las tablas publicadas. Usa estos estados con precisión:
- No disponible: la opción no proporciona la capacidad en el plan o las condiciones indicadas.
- No aplica: la dimensión lógicamente no corresponde a esa opción.
- Desconocido: el equipo no pudo verificar la respuesta a partir de una fuente adecuada.
Una celda contiene un dato, número o símbolo definido. Incluye unidades y condiciones: «$49/mes por 5 asientos» es utilizable; «Asequible» no lo es. «10 GB por espacio de trabajo» es utilizable; «Almacenamiento generoso» no lo es. Si un valor necesita una aclaración, mantenla breve y adjunta la nota de fuente a la tabla. Si necesita un párrafo, explícalo debajo de la tabla y usa una etiqueta de celda concisa como «Condicional».
Usa de tres a ocho filas para un resumen y no más de diez sin una razón sólida. Usa de dos a cinco columnas de opciones, más la columna de encabezado de fila. Mantén los encabezados concretos y paralelos. No pongas botones, formularios, medios de reproducción automática, texto de ventas del tamaño de un párrafo, testimonios, calificaciones de estrellas sin una metodología declarada ni tablas anidadas dentro de las celdas. Nunca uses celdas fusionadas en la comparación editorial.
La fecha de verificación es obligatoria porque los precios, el inventario, los nombres de los planes y la disponibilidad de las características cambian. Escribe una fecha exacta, no «recientemente» o «actual». Asigna un responsable y una cadencia de revisión antes de la publicación. Una tabla desactualizada es peor que ninguna tabla: su estructura limpia hace que una afirmación anticuada parezca inusualmente autoritaria y fácil de repetir.
Tipos de publicación que la utilizan
| Tipo de publicación | Uso | Posición preferida |
|---|---|---|
| Comparación A vs B | Elemento de evidencia principal obligatorio | Después del veredicto y el método de comparación; antes del análisis detallado |
| Guía del mejor X para Y | Resumen de lista seleccionada obligatorio cuando las opciones comparten dimensiones | Después de los criterios de selección; antes de las recomendaciones individuales |
| Página de alternativas a X | Obligatorio cuando los sustitutos pueden evaluarse de forma coherente | Después de las razones para cambiar y los criterios de inclusión |
| Página de categoría | Soporte de decisión opcional para un rango acotado | Después de la orientación de categoría; antes de la cuadrícula completa de productos |
| Página de producto | Comparación opcional de planes o modelos | Después de la propuesta de valor principal; antes de la acción de compra |
| Guía listicle | Recomendado cuando las entradas de la lista comparten criterios | Después de la metodología; antes de la lista numerada |
El postTypes en el frontmatter es la unión legible por máquina a estos seis documentos. La tabla visible explica la ubicación editorial que el identificador por sí solo no puede transmitir.
Lista de verificación de control de calidad
- El resultado es una tabla HTML nativa, no una imagen, lienzo, cuadrícula CSS o conjunto de elementos
div. - La tabla tiene un título útil, una fila de encabezado clara, ámbito de encabezado de columna y ámbito de encabezado de fila.
- Cada opción se evalúa en cada dimensión; ninguna celda publicada está vacía.
- «No disponible», «No aplica» y «Desconocido» se usan según sus significados distintos.
- Cada celda contiene un dato, número con unidades o símbolo definido — nunca una frase de marketing.
- Cada símbolo tiene una leyenda de texto visible y un equivalente de texto accesible en su celda.
- Las filas se ordenan por relevancia para la decisión, no alfabéticamente ni por el orden de la página del proveedor.
- La tabla se mantiene dentro del límite de columnas, o el contenido se ha segmentado deliberadamente.
- En móvil, el desplazamiento horizontal está contenido dentro de la región de tabla etiquetada y la página no se desplaza lateralmente.
- Una primera columna fija, cuando se usa, sigue siendo legible, segura para el teclado y de alto contraste.
- No hay celdas fusionadas ni celdas que contengan tablas anidadas o controles interactivos complejos.
- Una fecha de verificación precisa y una nota de fuente principal adecuada están presentes.
- La columna destacada, si la hay, tiene una etiqueta de texto y no suprime datos desfavorables.
- La tabla sigue comunicando sus relaciones cuando los estilos y scripts personalizados no están disponibles.
FAQ
¿Cuántas opciones debe incluir una tabla comparativa?
Usa de dos a cinco columnas de opciones en la tabla principal. Si son necesarias más opciones, divide la comparación en tablas específicas por audiencia o proporciona una interfaz filtrable que preserve la semántica nativa de la tabla.
¿Puede una tabla comparativa usar marcas de verificación y cruces?
Sí, pero cada símbolo necesita una leyenda de texto visible y un equivalente de texto accesible. Una forma o color por sí solo no es una respuesta porque los lectores no pueden inferir de forma fiable si significa incluido, recomendado, probado o simplemente presente.
¿Qué debería significar una celda vacía?
Nada. Las celdas vacías están prohibidas porque su significado es incognoscible. Escribe «No disponible», «No aplica» o «Desconocido» y usa cada término según su significado definido.
¿Necesita una tabla comparativa datos estructurados?
Generalmente no. No existe un esquema general de tabla comparativa. Mantenlo dentro del esquema válido de la página y asigna propiedades de producto, oferta o calificación solo cuando la página tenga la evidencia que esas propiedades requieren.
¿Con qué frecuencia debe revisarse la tabla?
Adapta la cadencia a la volatilidad. Los precios y los derechos de los planes pueden requerir una revisión mensual o trimestral; las especificaciones estables pueden cambiar con menos frecuencia. En todos los casos, muestra la fecha exacta de la última verificación para que los lectores puedan juzgar la actualidad por sí mismos.
Más tutoriales en esta sección
¿Listo para ponerlo en práctica?
Revisión gratuita · Prueba de 7 días · sin tarjeta de crédito