✅Cómo Crear una Tabla de Precios Responsive en Gutenberg (HTML + CSS)

Hoy te voy a enseñar cómo crear una tabla de precios responsive para tu landing page o página de servicios utilizando únicamente HTML y CSS, directamente dentro de un bloque HTML de Gutenberg.

Si solo necesitas mostrar una tabla sencilla de precios en tu página de inicio o en una sección concreta de tu web, no es necesario instalar un plugin adicional. Puedes conseguir un resultado muy profesional con unas pocas líneas de código, evitando así cargar tu sitio con plugins pesados que pueden afectar al rendimiento.

Además, hacerlo manualmente te da total libertad para personalizar tanto el diseño como la estructura de la tabla.

¿Qué vamos a crear?

Una tabla de precios de 3 columnas, totalmente responsive, con:

• Nombre del plan.
• Precio destacado.
• Lista de características.
• Botón de compra.
• Y un detalle extra: la columna central estará destacada con una banda de «Popular» para dirigir la atención al plan recomendado.

Todo el código que te muestro es adaptable, así que podrás duplicar o eliminar columnas según lo necesites.

Código de la tabla de precios

Solo tienes que insertar un bloque de HTML personalizado en Gutenberg y pegar este código:

<style>
  .pricing-table {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  .pricing-plan {
    flex: 1 1 250px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
  }

  .pricing-plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }

  /* Destacar la del medio */
  .pricing-plan.featured {
    background: #ffffff;
    border: 2px solid #13b0a0;
    z-index: 1;
    transform: scale(1.05);
  }

  .pricing-plan h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
  }

  .pricing-plan .price {
    font-size: 2rem;
    color: #13b0a0;
    margin-bottom: 15px;
  }

  .pricing-plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
  }

  .pricing-plan ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }

  .pricing-plan ul li:last-child {
    border-bottom: none;
  }

  .pricing-plan a {
    display: inline-block;
    padding: 10px 20px;
    background: #13b0a0;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
  }

  .pricing-plan a:hover {
    background: #009975;
  }

  /* Banda de Popular */
  .popular-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #13b0a0;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 0 8px 0 8px;
    font-weight: bold;
  }
</style>

<div class="pricing-table">
  <div class="pricing-plan">
    <h3>Plan Básico</h3>
    <div class="price">$9/mes</div>
    <ul>
      <li>1 sitio web</li>
      <li>10 GB de espacio</li>
      <li>Soporte estándar</li>
      <li>Certificado SSL incluido</li>
    </ul>
    <a href="#">Contratar</a>
  </div>
  <div class="pricing-plan featured">
    <div class="popular-badge">Popular</div>
    <h3>Plan Profesional</h3>
    <div class="price">$29/mes</div>
    <ul>
      <li>5 sitios web</li>
      <li>50 GB de espacio</li>
      <li>Soporte prioritario</li>
      <li>Dominio gratis</li>
    </ul>
    <a href="#">Contratar</a>
  </div>
  <div class="pricing-plan">
    <h3>Plan Empresarial</h3>
    <div class="price">$59/mes</div>
    <ul>
      <li>Sitios ilimitados</li>
      <li>Espacio ilimitado</li>
      <li>Soporte VIP 24/7</li>
      <li>Incluye herramientas premium</li>
    </ul>
    <a href="#">Contratar</a>
  </div>
</div>
Lenguaje del código: HTML, XML (xml)

¿Cómo personalizar la tabla a tu gusto?

1. Agregar o eliminar columnas

Cada plan es un bloque .pricing-plan. Si quieres añadir un cuarto o quinto plan, simplemente copia y pega uno de los bloques existentes dentro del <div class="pricing-table">:

<div class="pricing-plan">
  <h3>Plan Avanzado</h3>
  <div class="price">$99/mes</div>
  <ul>
    <li>Todo ilimitado</li>
    <li>Soporte dedicado</li>
    <li>Consultoría incluida</li>
  </ul>
  <a href="#">Contratar</a>
</div>

Y si quieres que el nuevo plan también esté «destacado», añade la clase featured y la banda de «Popular».

2. Editar contenido y precios

Solo tienes que cambiar los textos dentro de cada bloque:

• El título: <h3>Plan Básico</h3>
• El precio: <div class="price">$9/mes</div>
• Las características: dentro de <ul><li>...</li></ul>
• El enlace del botón: cambia el href="#" por la URL de tu checkout, formulario o página de compra.

3. Modificar estilos y colores

Desde la sección <style> puedes cambiar:

• Colores del precio y botón (#13b0a0 y #009975).
• Bordes y fondos.
• Tamaño y color del badge de «Popular».

Por ejemplo, si quieres que la tabla tenga un fondo oscuro, podrías cambiar background: #f9f9f9; por un gris más oscuro y adaptar los textos a blanco.

4. Responsividad

Esta tabla ya es responsive de forma nativa:

• En pantallas grandes, las columnas se muestran en fila (3 en una línea).
• En pantallas pequeñas, las columnas se apilan una debajo de otra.

Si quieres mejorar aún más la versión móvil, puedes añadir un pequeño media query como este:

@media (max-width: 768px) {
  .pricing-plan {
    transform: none !important;
  }
  .pricing-plan.featured {
    transform: none !important;
  }
}

Así eliminas el escalado del plan destacado en móviles.

¿Por qué hacerlo sin plugins?

Porque en la mayoría de los casos, una tabla de precios no necesita lógica avanzada ni efectos complejos. Gutenberg permite incrustar bloques HTML directamente y, si sabes un poco de CSS, puedes lograr resultados ligeros, rápidos y fáciles de mantener.

Además, te da total libertad para integrarla con el diseño de tu tema sin depender de estilos predefinidos que a veces son complicados de personalizar cuando usas plugins.