Tutorial WordPress: Diseñar tablas comparativas para hosting con solo HTML y CSS

Introducción

Este tutorial muestra, paso a paso y con todo lujo de detalles, cómo diseñar tablas comparativas para servicios de hosting usando únicamente HTML y CSS. El objetivo es conseguir tablas limpias, accesibles, responsivas y fáciles de integrar en WordPress sin depender de plugins. Incluyo ejemplos completos de marcado y estilos, variantes responsivas y consejos para integrar y optimizar en un tema o en el editor de bloques.

Principios básicos y buenas prácticas

Semántica: usa la etiqueta table para datos tabulares. Evita maquetar con tablas cuando no sean datos comparativos.
Accesibilidad: marca cabeceras (th), usa scope si es necesario y asegúrate de buen contraste y foco visible.
Responsividad: ofrece una versión de escritorio con columnas y una alternativa para móviles (scroll horizontal o diseño stacked).
Performance: evita imágenes pesadas usa SVG o iconos en CSS cuando sea posible y minimiza reglas CSS.
Mantenibilidad: separa estilos y reutiliza clases para poder actualizar tarifas o características sin rehacer la estructura.

Estructura semántica recomendada

Una tabla comparativa típica para hosting suele contener una fila de encabezados con planes y filas con características. Ejemplo de estructura mínima:

lttable class=cmp-tablegt
  lttheadgt
    lttrgt
      ltthgtCaracterísticalt/thgt
      ltthgtBásicolt/thgt
      ltthgtProlt/thgt
      ltthgtPremiumlt/thgt
    lt/trgt
  lt/theadgt
  lttbodygt
    lttrgt
      lttdgtEspacio en discolt/tdgt
      lttdgt10 GBlt/tdgt
      lttdgt50 GBlt/tdgt
      lttdgt100 GBlt/tdgt
    lt/trgt
    lt!-- más filas según necesites --gt
  lt/tbodygt
lt/tablegt

Ejemplo completo: diseño moderno con CSS

El siguiente bloque muestra una tabla con estilo profesional: cabecera destacada, plan destacado (badge), colores, hover y botones simulados. Copia el HTML en el editor de WordPress (bloque HTML) y añade el CSS en Apariencia gt Personalizar gt CSS adicional o en el archivo style.css del tema hijo.

lttable class=cmp-tablegt
  lttheadgt
    lttrgt
      ltthgtCaracterísticalt/thgt
      ltthgtBásicolt/thgt
      ltth class=featuredgtProlt/thgt
      ltthgtPremiumlt/thgt
    lt/trgt
  lt/theadgt
  lttbodygt
    lttrgt
      lttdgtPrecio / meslt/tdgt
      lttdgtltbgt€3.99lt/bgtltbrgtltsmallgtPago anuallt/smallgtlt/tdgt
      lttdgtltbgt€7.99lt/bgtltbrgtltsmallgtPago anuallt/smallgtlt/tdgt
      lttdgtltbgt€14.99lt/bgtltbrgtltsmallgtPago anuallt/smallgtlt/tdgt
    lt/trgt
    lttrgt
      lttdgtEspaciolt/tdgt
      lttdgt10 GBlt/tdgt
      lttdgt50 GBlt/tdgt
      lttdgt100 GBlt/tdgt
    lt/trgt
    lttrgt
      lttdgtAncho de bandalt/tdgt
      lttdgtIlimitadolt/tdgt
      lttdgtIlimitadolt/tdgt
      lttdgtIlimitadolt/tdgt
    lt/trgt
    lttrgt
      lttdgtSoporte 24/7lt/tdgt
      lttdgtEmaillt/tdgt
      lttdgtChat amp Emaillt/tdgt
      lttdgtTeléfono, Chat amp Emaillt/tdgt
    lt/trgt
    lttrgt
      lttdgtlt/tdgt
      lttdgtltbutton class=btn>Seleccionarlt/buttongtlt/tdgt
      lttdgtltbutton class=btn btn-primary>Seleccionarlt/buttongtlt/tdgt
      lttdgtltbutton class=btn>Seleccionarlt/buttongtlt/tdgt
    lt/trgt
  lt/tbodygt
lt/tablegt

/ Base /
.cmp-table{
  width:100%
  border-collapse:collapse
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
  color:#2b2b2b
  margin:1.2rem 0
}

/ Cabecera /
.cmp-table thead th{
  background:linear-gradient(180deg,#f6f8fb,#eef3f8)
  text-align:left
  padding:14px 16px
  font-weight:700
  border-bottom:2px solid rgba(0,0,0,0.06)
}

/ Filas /
.cmp-table tbody td{
  padding:14px 16px
  border-bottom:1px solid rgba(0,0,0,0.04)
  vertical-align:middle
}

/ Resaltar columna destacada /
.cmp-table thead th.featured,
.cmp-table tbody td.featured{
  background:#fff7e6
}

/ Hover de columnas: efecto sutil sobre la fila completa /
.cmp-table tbody tr:hover{
  background:rgba(0,0,0,0.02)
}

/ Botones (simulados con CSS) /
.btn{
  display:inline-block
  padding:8px 14px
  background:#f0f0f0
  border-radius:6px
  border:1px solid rgba(0,0,0,0.06)
  cursor:pointer
  color:#111
  font-weight:600
}
.btn-primary{
  background:#2b8cff
  color:#fff
  border-color:rgba(43,140,255,0.8)
}

/ Diseño general: asegurar buen contraste y legibilidad /
.cmp-table thead th,
.cmp-table tbody td b{
  color:#0b3351
}

/ Pequeñas adaptaciones para impresos y lectura /
@media print{
  .cmp-table { page-break-inside: avoid }
  .btn { display:none }
}

Opciones responsivas

Para móviles hay dos estrategias principales:

Scroll horizontal: mantenemos la tabla intacta y permitimos que el contenedor haga overflow-x. Es simple y preserva la semántica.
Versión stacked: convertimos cada fila en un bloque apilado con etiquetas de campo. Requiere añadir atributos data-label a cada td o reestructurar con CSS, pero ofrece lectura más natural en móvil.

1) Scroll horizontal (rápido y robusto)

Añade un contenedor con overflow-x: auto y las tablas se verán bien en móviles.

/ Contenedor para permitir scroll /
.table-wrapper{
  width:100%
  overflow-x:auto
  -webkit-overflow-scrolling:touch
}
.table-wrapper .cmp-table{
  min-width:720px / ajusta según columnas /
}

ltdiv class=table-wrappergt
  lttable class=cmp-tablegt
    lt!-- contenido de la tabla --gt
  lt/tablegt
lt/divgt

2) Stacked (apilado) — alternativa más amigable en móvil

Este método transforma las celdas en bloques con su etiqueta visible. Requiere añadir data-label a cada td que replicará la cabecera correspondiente.

lttable class=cmp-table stackedgt
  lttheadgt
    lttrgt
      ltthgtCaracterísticalt/thgt
      ltthgtBásicolt/thgt
      ltthgtProlt/thgt
    lt/trgt
  lt/theadgt
  lttbodygt
    lttrgt
      lttd data-label=CaracterísticagtEspaciolt/tdgt
      lttd data-label=Básicogt10 GBlt/tdgt
      lttd data-label=Progt50 GBlt/tdgt
    lt/trgt
  lt/tbodygt
lt/tablegt

/ Versión apilada: activa en pantallas pequeñas /
@media (max-width:720px){
  .cmp-table.stacked thead{
    display:none
  }
  .cmp-table.stacked tbody, 
  .cmp-table.stacked tr, 
  .cmp-table.stacked td{
    display:block
    width:100%
  }
  .cmp-table.stacked td{
    padding:12px 16px
    border-bottom:1px solid rgba(0,0,0,0.04)
    position:relative
  }
  .cmp-table.stacked td::before{
    content:attr(data-label)
    font-weight:700
    display:block
    margin-bottom:6px
    color:#0b3351
  }
  / Mantener botones y espaciado /
  .cmp-table.stacked td .btn{ width:100% box-sizing:border-box }
}

Accesibilidad y SEO

Usa th para encabezados de columna y, si es necesario, scope=col o scope=row para clarificar la relación.
Proporciona texto claro en las celdas evita depender solo de colores para transmitir información.
Si ofreces un “plan destacado”, añade un aria-label o un pequeño texto oculto para lectores de pantalla que explique por qué es especial.
Evita tablas anidadas complejas simplifica la estructura para mejor indexación y lectura por parte de asistentes.

Integración en WordPress

Editor de bloques (Gutenberg): inserta un bloque HTML personalizado y pega el HTML de la tabla. Añade el CSS en Apariencia gt Personalizar gt CSS adicional.
Editor clásico o constructores: usa la vista HTML o el widget de código y pega lo anterior. Si tu constructor permite CSS por bloque, puedes aislar los estilos allí.
Tema hijo: para cambios permanentes, añade los estilos al style.css del tema hijo y el HTML en la plantilla o mediante un bloque reusable.
Shortcode: si prefieres un shortcode, crea uno en functions.php que devuelva el HTML de la tabla. Mantén los estilos en CSS global o condicional según el shortcode.

Optimización y mantenimiento

Mantén las clases coherentes: .cmp-table, .featured, .btn, .table-wrapper para reutilizar fácilmente.
Si tus planes cambian con frecuencia, considera generar la tabla dinámicamente desde un custom post type o un bloque dinámico (requiere PHP/JS).
Prueba contraste con herramientas (WCAG) y revisa la usabilidad en táctil (espaciado, botones grandes).
Para caché y rendimiento, coloca CSS en archivos encolados cuando sea posible, en lugar de inyectarlo inline repetidamente.

Trucos visuales y avanzados

Usa sombras sutiles y transformaciones 2D para destacar la columna preferida (.featured { transform: translateY(-6px) box-shadow:0 8px 24px rgba(43,140,255,0.12) }).
Incluye microtextos como meses gratis o garantía de reembolso con etiquetas pequeñas para aumentar la conversión.
Si vas a incluir iconos, usa SVG inline o fuentes de iconos para mantener la escalabilidad y evitar peticiones adicionales.

Ejemplo: columna destacada con badge y sombra (CSS)

/ Badge y elevación para destacar un plan /
.cmp-table thead th.featured{
  position:relative
}
.cmp-table thead th.featured::after{
  content:Más popular
  position:absolute
  top:-10px
  left:50%
  transform:translateX(-50%)
  background:#ffdd57
  color:#2b2b2b
  padding:6px 10px
  border-radius:20px
  font-size:12px
  font-weight:700
  box-shadow:0 6px 18px rgba(0,0,0,0.08)
}
.cmp-table thead th.featured,
.cmp-table tbody td:nth-child(3){
  transform:translateY(-6px)
  box-shadow:0 10px 30px rgba(43,140,255,0.08)
  border-radius:8px
}

Conclusión

Con solo HTML y CSS se pueden construir tablas comparativas de hosting profesionales, accesibles y responsivas. La clave es mantener la semántica, prever la experiencia móvil (scroll o stacked), optimizar estilos para rendimiento y seguir buenas prácticas de accesibilidad. Los ejemplos incluidos son plantilla lista para integrar en WordPress mediante bloque HTML, CSS adicional o tema hijo.

Implementa, prueba en dispositivos reales y ajusta colores y espaciado según tu identidad visual para maximizar conversión y claridad. Los snippets ofrecidos son plenamente funcionales y adaptables a tus necesidades.

SushiHost