Introducción

En este tutorial detallado aprenderás a diseñar una tabla de compatibilidad de plugins para WordPress usando HTML y CSS (con ejemplos para integrarla dinámicamente desde PHP). El objetivo es crear una tabla clara, accesible y responsiva que permita a tus usuarios comprobar de un vistazo la compatibilidad de cada plugin con versiones de WordPress, PHP u otros requisitos.

Objetivos concretos

• Diseñar una estructura HTML semántica y accesible para la tabla.
• Aplicar CSS profesional para estilo, contraste y respuesta móvil.
• Generar la tabla dinámicamente desde WordPress (ejemplo PHP).
• Proponer mejoras opcionales: iconos de estado, filtros y exportación.

Planificación de columnas y datos

Antes de construir la tabla define qué columnas son necesarias. Recomendación básica:

1. Nombre del plugin (con enlace al repositorio o página oficial).
2. Versión del plugin probada.
3. Versión de WordPress usada en la prueba.
4. Versión de PHP usada en la prueba.
5. Estado de compatibilidad (Compatible / Parcial / No compatible).
6. Notas (conflictos conocidos, soluciones, etc.).

Estructura HTML recomendada

Usa tabla con thead y tbody para semántica. Cada celda de datos puede llevar atributos data- para facilitar estilos responsivos y accesibilidad.

  

    

      
Plugin
      
Versión
      
WordPress
      
PHP
      
Estado
      
Notas
    
  
  

    

      
Ejemplo Plugin
      
1.2.3
      
6.3.1
      
8.0
      
Compatible
      
Sin conflictos detectados
    
    
  

CSS: diseño, contraste y responsividad

Aplica CSS claro y modular. Usa variables para colores, estilos de badges para el estado y un enfoque móvil-first. A continuación un ejemplo completo que cubre estilo base, zebra striping, badges y comportamiento responsivo (fila apilada en pantallas pequeñas mediante pseudoelementos que usan data-label).

:root{
  --bg: #ffffff
  --text: #1f2937
  --muted: #6b7280
  --accent: #2563eb
  --success: #16a34a
  --warning: #f59e0b
  --danger: #ef4444
  --border: #e5e7eb
  --radius: 8px
  --row-hover: #f8fafc
}

/ Tabla base /
.compat-table{
  width:100%
  border-collapse:collapse
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
  color:var(--text)
  background:var(--bg)
  border-radius: var(--radius)
  overflow:hidden
  box-shadow: 0 1px 2px rgba(16,24,40,0.04)
}

/ Encabezado /
.compat-table thead th{
  text-align:left
  padding:12px 16px
  font-weight:600
  font-size:0.95rem
  background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)
  border-bottom:1px solid var(--border)
  position:sticky
  top:0
  z-index:2
}

/ Celdas /
.compat-table td{
  padding:12px 16px
  border-bottom:1px solid var(--border)
  font-size:0.92rem
  vertical-align:middle
  color:var(--text)
}

/ Zebra y hover /
.compat-table tbody tr:nth-child(odd){
  background: #ffffff
}
.compat-table tbody tr:nth-child(even){
  background: #fbfbfd
}
.compat-table tbody tr:hover{
  background: var(--row-hover)
}

/ Badges de estado /
.status{
  display:inline-block
  padding:4px 8px
  border-radius:999px
  font-weight:600
  font-size:0.8rem
  color:#fff
  letter-spacing:0.2px
}
.status-compatible{ background: var(--success) }
.status-partial{ background: var(--warning) color:#111827 }
.status-incompatible{ background: var(--danger) }

/ Enlaces /
.compat-table a{
  color:var(--accent)
  text-decoration:none
}
.compat-table a:hover{ text-decoration:underline }

/ Responsividad: técnica de filas apiladas /
@media (max-width:800px){
  .compat-table thead{ display:none }
  .compat-table, .compat-table tbody, .compat-table tr, .compat-table td{
    display:block
    width:100%
  }
  .compat-table tr{
    margin-bottom:12px
    border-radius:8px
    padding:10px
    background: #fff
    box-shadow: 0 1px 1px rgba(16,24,40,0.02)
  }
  .compat-table td{
    display:flex
    justify-content:space-between
    align-items:center
    padding:8px 12px
    border-bottom: none
  }
  .compat-table td::before{
    content: attr(data-label)
    flex:0 0 45%
    color:var(--muted)
    font-weight:600
    margin-right:8px
  }
}

/ Accesibilidad: foco visible en enlaces /
.compat-table a:focus{
  outline:3px solid rgba(37,99,235,0.2)
  outline-offset:2px
}

Generación dinámica desde WordPress (PHP)

La forma más sencilla para crear la tabla desde WordPress es preparar un array con la información de compatibilidad (puede venir de un CPT, post meta, opción o fuente externa) y recorrerlo para imprimir filas. Ejemplo mínimo de generación desde un template o shortcode:

// Ejemplo de shortcode: [compat_table]
add_shortcode(compat_table, function(atts){
  // Datos de ejemplo, en producción obtiene de base de datos o API
  plugins = [
    [
      name => Ejemplo Plugin,
      url  => https://es.wordpress.org/plugins/ejemplo-plugin/,
      version => 1.2.3,
      wp => 6.3.1,
      php => 8.0,
      status => compatible,
      notes => Sin conflictos detectados,
    ],
    // ... más items
  ]

  ob_start()
  ?>
  

    

      

        
Plugin
        
Versión
        
WordPress
        
PHP
        
Estado
        
Notas
      
    
    

      
      

        
>
        

        

        

        
>
          
        
        

      
      
    
  
  
Cómo añadir el CSS en WordPress (enqueue)
Registra y encola el CSS desde functions.php o plugin para evitar inline y conflictos:
function theme_enqueue_compat_table_styles(){
  wp_register_style(compat-table-styles, get_stylesheet_directory_uri() . /css/compat-table.css, [], 1.0)
  wp_enqueue_style(compat-table-styles)
}
add_action(wp_enqueue_scripts, theme_enqueue_compat_table_styles)

Filtrado y mejoras interactivas (opcional)
Para mejorar la experiencia puedes añadir:

Filtros por estado o versión (selects que oculten/enseñen filas mediante JS).
Búsqueda en la tabla (filtrado por nombre).
Exportar CSV o PDF.
Integración con un CPT compatibility-test para almacenar resultados por plugin y versión automáticamente.

Ejemplo simple de filtro por estado (código JS de ejemplo, incrustar en un archivo .js y encolarlo):
// Filtra filas por clase de estado: status-compatible, status-partial, status-incompatible
function filterCompat(status){
  var rows = document.querySelectorAll(.compat-table tbody tr)
  rows.forEach(function(row){
    var cell = row.querySelector(td[data-label=Estado])
    if(!cell) return
    var isVisible = status === all  cell.classList.contains(status-   status)
    row.style.display = isVisible ?  : none
  })
}
// Ejemplo: filterCompat(compatible)

Accesibilidad y SEO

Usa scope=col en th y atributos aria-label en la tabla para lectores de pantalla.
Evita colores con bajo contraste comprueba WCAG AA.
Proporciona enlaces claros y añade atributos rel=noopener si abres en nueva pestaña (target not included aquí).
Si usas filas apiladas en móvil, conserva data-label para dar contexto a cada celda.

Buenas prácticas de contenido y mantenimiento

Registra la fecha de la última prueba por plugin (puede ser una columna adicional) y muestra la versión probada.
Incluye notas de pruebas específicas: entornos, plugins activos durante la prueba, tema activo.
Automatiza cuando sea posible: ejecuta pruebas en staging y almacena resultados en meta o en un endpoint que puedas consumir.
Documenta la metodología para que los usuarios sepan cómo se determinó la compatibilidad.

Checklist antes de publicar

Pruebas en distintos navegadores y tamaños de pantalla.
Verificación de contraste y navegación por teclado.
Validación de HTML y CSS (sin errores críticos).
Comprobación de enlaces y escaping en PHP (esc_html, esc_url).
Encolar CSS/JS correctamente para evitar conflictos con otros estilos.

Ejemplo final breve (combinando todo)
Resumen: crea la tabla semántica, aplica el CSS mostrado y genera filas desde PHP. Añade pequeñas mejoras interactivas con JS y encola correctamente los activos en WordPress.
Conclusión
Con una estructura bien pensada, estilos responsables y una generación dinámica desde PHP, tendrás una tabla de compatibilidad profesional y accesible. Implementa seguimiento de fechas y metodología de pruebas para mantener la información actualizada. Este enfoque equilibra usabilidad, mantenimiento y buenas prácticas de accesibilidad.