Generador de Tablas de Precios CSS

Estructura básica

<section class="pricing">
  <article class="plan">
    <h3>Inicio</h3>
    <p class="price">9 € <span>/mes</span></p>
    <p class="tagline">Para proyectos en solitario.</p>
    <ul class="features">
      <li>3 proyectos</li>
      <li>10 GB de almacenamiento</li>
      <li>Soporte comunitario</li>
    </ul>
    <a class="cta" href="#">Comienza gratis</a>
  </article>

  <article class="plan featured">
    <span class="badge">Más popular</span>
    <h3>Pro</h3>
    <p class="price">29 € <span>/mes</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Equipo</h3>
    <!-- ... -->
  </article>
</section>

Rejilla responsiva de tres columnas

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit + minmax(240px, 1fr) proporciona un diseño de tres columnas en escritorio y una pila de una sola columna en móvil, sin necesidad de configurar nada más.

El plan destacado

Señales visuales que atraen la atención:

• Borde de color en el color de acento de la marca.
• Tarjeta ligeramente elevada con un margin-top negativo o translateY(-4px).
• Botón CTA más grande, normalmente relleno con el color de marca, mientras que el resto de planes usan un botón solo con contorno.
• Insignia (“Más popular”, “La mejor relación calidad-precio”) posicionada de forma absoluta en la parte superior de la tarjeta.
• Tarjeta más alta para atraer la vista, aunque eso dificulta comparar los planes entre sí.

No las apliques todas a la vez: elige dos o tres. Demasiadas señales acaban aplanando la jerarquía en lugar de crearla.

Alternador mensual / anual

<div class="billing-toggle">
  <button data-active="true">Mensual</button>
  <button>Anual · Ahorra 20%</button>
</div>

El selector suele intercambiar los precios con un poco de JavaScript, o aprovecha el estado :checked de un botón de tipo radio. Muestra el porcentaje de descuento o el ahorro en euros dentro de la etiqueta del selector (por ejemplo, “Anual · Ahorra 20%”): en muchas tablas es el elemento más persuasivo de todos.

Estilo de las filas de características

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Usa una marca de verificación para lo que está “incluido” y texto en gris o una cruz suave para lo “no incluido”. Nunca taches el texto sin bajar además el contraste: un tachado marcado se lee como énfasis, no como una carencia.

Mantén el CTA bien visible

Un CTA por plan, visualmente coherente en todos ellos. Usar un texto distinto en cada plan (“Empieza gratis”, “Pásate a Pro”, “Habla con ventas”) está bien y, de hecho, ayuda a llevar al usuario al flujo adecuado.

Haz que sea fácil de leer en diagonal

Los usuarios rara vez leen una tabla de precios de izquierda a derecha: primero repasan los precios, luego los CTA y solo al final las diferencias entre características. Optimiza para ese recorrido:

1. Nombre del plan y precio en grande, en la parte superior de la tarjeta.
2. CTA visible sin necesidad de hacer scroll dentro de la tarjeta.
3. Lista de características debajo. Resalta las diferencias entre planes en lugar de repetir las mismas características en todas las columnas.

Lista de comprobación de accesibilidad

• Cada plan es un <article> independiente con su propio <h3>.
• La insignia “Más popular” es una etiqueta de texto visible, no solo un color (por los usuarios con daltonismo).
• Los botones CTA llevan texto descriptivo (“Empezar la prueba de Pro”) en lugar de “Haz clic aquí”.
• El selector de facturación usa aria-pressed o la semántica de los botones de tipo radio.
• Si el cambio de precio se implementa con JavaScript, anúncialo mediante aria-live="polite".