Tabla de precios para sitio web (planes en HTML y CSS)
Escribe los planes en el cuadro: una línea con nombre y precios, y debajo los elementos. Marca el destacado con * en el nombre.
Cómo usarPlanes lado a lado, con el mejor destacado
Disponible en: 
Tabla de precios para sitio web (planes en HTML y CSS): para qué sirve
Una sección de planes bien armada ayuda al visitante a comparar y elegir. Escribe cada plan con nombre, precio mensual, precio anual, botón y los elementos incluidos (+) y no incluidos (-), y marca el destacado con un asterisco.
El código sale responsivo, con el plan destacado ligeramente elevado y con insignia, íconos de incluido y no incluido (con texto para lectores de pantalla) y un interruptor mensual/anual hecho solo con CSS y botones de opción. Ajusta el color, la moneda y el texto de la insignia.
Cómo usar
- Escribe los planes y los elementos.
- Marca el plan destacado y ajusta los colores.
- Copia el código.
Cuándo usar
- Planes de suscripción.
- Paquetes de servicios.
- Planes de gimnasio o curso.
Preguntas frecuentes
¿Cómo escribir los planes?
Cada plan empieza con una línea 'Nombre | precio mensual | precio anual | texto del botón | enlace'. Las líneas siguientes, que empiezan con + o -, son los elementos incluidos y no incluidos. Deja una línea en blanco entre los planes. Pon * antes del nombre del plan que debe quedar destacado.
¿Cómo funciona el interruptor mensual/anual?
Si completas el precio anual, aparece un interruptor para que el visitante alterne. Funciona con CSS y botones de opción, sin JavaScript, y los dos precios quedan en el HTML.
¿Cuántos planes mostrar?
Tres es el número más común: el del medio, destacado, suele ser el más elegido. Con más de cuatro, la comparación se vuelve difícil; en ese caso, una tabla comparativa funciona mejor.
¿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.