SushiHost

Tutorial WordPress: Tabla comparativa de planes de hosting con columnas iguales CSS

SushiHost

·

·

Introducción

Este artículo explica paso a paso cómo construir una tabla comparativa de planes de hosting para WordPress con columnas iguales mediante CSS. Incluye varias técnicas (tabla HTML con table-layout, CSS Grid y diseño tipo tarjetas con Flexbox), ejemplos listos para pegar en un bloque HTML o en un tema hijo, recomendaciones de accesibilidad y adaptación responsive, y cómo integrarlo correctamente en WordPress.

Objetivo y consideraciones previas

Enfoques posibles

  1. HTML Table tradicional CSS (table-layout: fixed): fácil y semántico para comparativas tabulares.
  2. CSS Grid: control total de columnas iguales con grid-template-columns: repeat(n, 1fr).
  3. Tarjetas con Flexbox: más flexible visualmente las columnas se comportan como tarjetas con igual anchura si se usan 1fr o propiedades de flex.

1) Solución clásica: tabla HTML con columnas iguales (table-layout: fixed)

La propiedad table-layout: fixed hace que el motor de renderizado calcule el ancho de la tabla basándose en el ancho de la propia tabla y en las primeras filas, proporcionando columnas de anchura fija. Es ideal cuando quieres columnas sincronizadas aunque el contenido varíe.

Ejemplo HTML

lttable class=pricing-table role=table aria-label=Comparativa planes hostinggt
  ltcaptiongtComparativa planes de hostinglt/captiongt
  ltcolgroupgt
    ltcol style=width: 25%/gt
    ltcol style=width: 25%/gt
    ltcol style=width: 25%/gt
    ltcol style=width: 25%/gt
  lt/colgroupgt
  lttheadgt
    lttrgt
      ltth scope=colgtBásicolt/thgt
      ltth scope=colgtEstándarlt/thgt
      ltth scope=colgtAvanzadolt/thgt
      ltth scope=colgtProlt/thgt
    lt/trgt
  lt/theadgt
  lttbodygt
    lttrgtlttdgt1 sitiolt/tdgtlttdgt3 sitioslt/tdgtlttdgt10 sitioslt/tdgtlttdgtIlimitadolt/tdgtlt/trgt
    lttrgtlttdgt10 GBlt/tdgtlttdgt50 GBlt/tdgtlttdgt100 GBlt/tdgtlttdgtIlimitadolt/tdgtlt/trgt
    lttrgtlttdgtSSL gratislt/tdgtlttdgtSSL gratislt/tdgtlttdgtSSL y backupslt/tdgtlttdgtTodo incluidolt/tdgtlt/trgt
    lttr class=price-rowgt
      lttdgtltstronggt€2.99/meslt/stronggtlt/tdgt
      lttdgtltstronggt€4.99/meslt/stronggtlt/tdgt
      lttdgtltstronggt€8.99/meslt/stronggtlt/tdgt
      lttdgtltstronggt€14.99/meslt/stronggtlt/tdgt
    lt/trgt
    lttr class=cta-rowgt
      lttdgtlta href=https://tuhosting.example/compra-basico class=ctagtContratarlt/agtlt/tdgt
      lttdgtlta href=https://tuhosting.example/compra-estandar class=ctagtContratarlt/agtlt/tdgt
      lttdgtlta href=https://tuhosting.example/compra-avanzado class=ctagtContratarlt/agtlt/tdgt
      lttdgtlta href=https://tuhosting.example/compra-pro class=cta highlightgtContratarlt/agtlt/tdgt
    lt/trgt
  lt/tbodygt
lt/tablegt

CSS mínimo necesario (table-layout)

.pricing-table {
  width: 100%
  border-collapse: collapse
  table-layout: fixed / imprescindible para columnas iguales /
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
}

/ Estilos de celda /
.pricing-table th,
.pricing-table td {
  border: 1px solid #e2e8f0
  padding: 1rem
  text-align: center
  vertical-align: middle
  word-wrap: break-word / evita desbordes largos /
}

/ Resaltar precio y CTA /
.pricing-table .price-row td { font-size: 1.125rem }
.pricing-table .cta .highlight {
  background: #ff6b6b
  color: #fff
}

/ Botones estilo CTA (enlaces) /
.pricing-table .cta a {
  display: inline-block
  padding: 0.5rem 1rem
  background: #2563eb
  color: #fff
  text-decoration: none
  border-radius: 0.375rem
}
/ Soporte móvil: apilar filas en pantallas estrechas /
@media (max-width: 720px) {
  .pricing-table, .pricing-table thead, .pricing-table tbody, .pricing-table th, .pricing-table td, .pricing-table tr {
    display: block
  }
  .pricing-table thead { display: none }
  .pricing-table tr { margin-bottom: 1rem }
  .pricing-table td { text-align: left }
  / Puedes añadir etiquetas antes de cada td con data-attributes si quieres mostrar el encabezado /
}

Explicaciones clave

2) Alternativa moderna: CSS Grid para columnas iguales

Grid proporciona un control preciso y sencillo: grid-template-columns: repeat(4, 1fr) crea cuatro columnas de igual tamaño sin preocuparte por table-layout.

Ejemplo HTML tipo tabla con Grid (semántica alternativa: si prefieres mantener lttablegt, usa el primer método)

ltdiv class=pricing-grid role=table aria-label=Comparativa planes hostinggt
  ltdiv class=grid-head role=rowgt
    ltdiv role=columnheadergtBásicolt/divgt
    ltdiv role=columnheadergtEstándarlt/divgt
    ltdiv role=columnheadergtAvanzadolt/divgt
    ltdiv role=columnheadergtProlt/divgt
  lt/divgt

  ltdiv class=grid-row role=rowgt
    ltdiv role=cellgt1 sitiolt/divgt
    ltdiv role=cellgt3 sitioslt/divgt
    ltdiv role=cellgt10 sitioslt/divgt
    ltdiv role=cellgtIlimitadolt/divgt
  lt/div>
  lt!-- más filas --gt
lt/divgt

CSS para Grid

.pricing-grid {
  display: grid
  grid-template-columns: repeat(4, 1fr) / columnas iguales /
  gap: 1px / separador entre celdas /
  background: #e2e8f0
}
.pricing-grid gt  {
  background: #fff
  padding: 1rem
  border: 1px solid transparent
  text-align: center
}
/ Control responsive: reducir columnas /
@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr }
}

Ventajas del Grid

3) Diseño tipo tarjetas con Flexbox (igualar anchuras y alturas)

Si prefieres un look más visual, cada plan puede ser una tarjeta. Para que todas las columnas tengan la misma anchura y las tarjetas internas la misma altura (alineadas), usa Flexbox con propiedades de estiramiento.

Ejemplo HTML

ltdiv class=pricing-cardsgt
  ltarticle class=cardgt
    lth4gtBásicolt/h4gt
    ltulgtltligt1 sitiolt/ligtltligt10 GBlt/ligtlt/ulgt
    ltp class=pricegt€2.99/meslt/pgt
    lta href=https://tuhosting.example/compra-basico class=ctagtContratarlt/agt
  lt/articlegt
  lt!-- repetir para otras tarjetas --gt
lt/divgt

CSS Flexbox

.pricing-cards {
  display: flex
  gap: 1rem
  align-items: stretch / hace que todas las tarjetas tengan la misma altura /
}
.pricing-cards .card {
  flex: 1 1 0 / todas las tarjetas ocupan el mismo espacio /
  display: flex
  flex-direction: column
  border: 1px solid #e2e8f0
  padding: 1rem
}
.pricing-cards .card .price { margin-top: auto / mantiene el precio/CTA abajo / }
@media (max-width: 720px) {
  .pricing-cards { flex-direction: column }
}

4) Integración en WordPress

Opciones para colocar la tabla o tarjetas en tu sitio WordPress:

Ejemplo de cómo encolar CSS desde functions.php (tema hijo)

function mi_tema_enqueue_pricing_styles() {
  wp_enqueue_style( mi-pricing-styles, get_stylesheet_directory_uri() . /css/pricing.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_tema_enqueue_pricing_styles )

5) Accesibilidad, SEO y buenas prácticas

6) Problemas frecuentes y cómo solucionarlos

  1. Columna se rompe por texto largo: usar word-wrap: break-word o establecer max-width en imágenes/texto, o table-layout: fixed colgroup.
  2. Una columna tiene más altura que otra: en tablas nativas la altura varía por fila si quieres tarjetas con alturas iguales, usa Flexbox con align-items: stretch o Grid.
  3. En móvil la tabla queda ilegible: apilar filas, usar scroll-x con -webkit-overflow-scrolling: touch o convertir la tabla a tarjetas.
  4. CSS del tema sobrescribe la tabla: pregúntate si los selectores son suficientemente específicos o encola tu CSS después del del tema usa un tema hijo en producción.

7) Ejemplo completo práctico (tabla lista para usar)

Combina el HTML del apartado 1 con el CSS del mismo para obtener una tabla comparativa con columnas iguales, responsive y accesible. Copia el HTML en un bloque HTML y el CSS en Personalizar gt CSS adicional o en tu hoja de estilos del tema hijo.

Checklist antes de publicar

Resumen rápido

SushiHost

Leave a Reply

Your email address will not be published. Required fields are marked *