Tabla comparativa para sitio web
Escribe las columnas y las filas. Usa sí y no (o s y n) para convertirlos en ✓ y ✗; cualquier otro texto aparece tal cual.
Cómo usarCompara planes y productos lado a lado
Tabla comparativa para sitio web: para qué sirve
Una tabla comparativa ayuda al cliente a decidir entre planes, productos o servicios sin necesidad de preguntar. Escribe las columnas y las filas, usando sí y no para convertirlos en ✓ y ✗, y elige una columna para destacar con borde e insignia.
En el celular la tabla se desplaza hacia el lado con la primera columna fija. El HTML usa table con th y scope y un texto oculto de Sí y No junto a los símbolos, para que el lector de pantalla lea cada celda con el encabezado correcto.
Cómo usar
- Escribe las columnas separadas por barra.
- Escribe cada fila con el valor de cada columna.
- Elige el destacado y copia el código.
Cuándo usar
- Comparar planes de un servicio.
- Comparar modelos de producto.
- Mostrar diferencias frente a la competencia.
Preguntas frecuentes
¿Cómo se ve en el celular?
La tabla se desplaza hacia el lado dentro de una caja, y la primera columna, con el nombre de cada elemento, queda fija mientras se desplaza. Así la persona nunca pierde de vista lo que está comparando.
¿Los símbolos ✓ y ✗ son accesibles?
Cada símbolo viene con un texto oculto (Sí o No) para el lector de pantalla, y la tabla usa th con scope en las filas y columnas, así que cada celda se anuncia con el encabezado correcto.
¿Para qué sirve la columna destacada?
Para llamar la atención sobre la opción que recomiendas, con un borde y una insignia. Úsala en una sola columna; destacar varias anula el efecto.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.