Tutorial WordPress: Crear un listado de tutoriales en formato tabla con HTML semántico

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear en WordPress un listado de tutoriales en formato tabla utilizando HTML semántico. Se abordan buenas prácticas de accesibilidad, la implementación con código PHP para WordPress (shortcode o plantilla), y estilos CSS para que la tabla sea clara y responsiva.

Objetivo

Generar un listado ordenado de entradas o de un tipo de contenido personalizado (por ejemplo, tutorial) presentado en una tabla semántica, con columnas típicas como título, categoría, fecha y extracto, y que pueda integrarse fácilmente en plantillas o insertarse mediante un shortcode.

Por qué usar HTML semántico

Mejor accesibilidad para lectores de pantalla.
Mayor claridad para buscadores y mejores prácticas SEO.
Facilidad para aplicar estilos y comportamientos (CSS/JS) sin romper la semántica.

Estructura semántica recomendada

Una tabla semántica bien formada para listado debe incluir, como mínimo, las siguientes piezas:

caption para describir el propósito de la tabla.
thead con cabeceras (th) que tengan el atributo scope=col o scope=row según corresponda.
tbody con filas (tr) y celdas (td).
Si procede, tfoot para totales o notas.

Ejemplo de estructura HTML semántica (ejemplo visual)

lttable class=tutorials-table aria-describedby=descTablaTutorialesgt
  ltcaption id=descTablaTutorialesgtListado de tutoriales publicadoslt/captiongt
  lttheadgt
    lttrgt
      ltth scope=colgtTítulolt/thgt
      ltth scope=colgtCategoríalt/thgt
      ltth scope=colgtFechalt/thgt
      ltth scope=colgtResumenlt/thgt
    lt/trgt
  lt/theadgt
  lttbodygt
    lttrgt
      lttdgtlta href=https://tusitio.com/tutorial-ejemplogtCómo crear una tabla semánticalt/agtlt/tdgt
      lttdgtHTMLlt/tdgt
      lttdgt2025-09-24lt/tdgt
      lttdgtBreve descripción del tutorial...lt/tdgt
    lt/trgt
    lt!-- más filas --gt
  lt/tbodygt
lt/tablegt

Implementación en WordPress

La forma más flexible es crear una función que recupere los posts (o CPT) y genere la tabla. Se puede ofrecer como:

Shortcode para insertar en páginas o entradas.
Parte de una plantilla de tema (.php) para una página específica.

Ejemplo: shortcode que muestra una tabla de tutoriales

El siguiente código puede añadirse al archivo functions.php del tema (o a un plugin propio). Está pensado para listar entradas del tipo de post post filtradas por una categoría llamada tutoriales, o puedes ajustarlo para un CPT llamado tutorial.

lt?php
// Shortcode: [listado_tutoriales posts_per_page=10]
function shortcode_listado_tutoriales( atts ) {
    atts = shortcode_atts( array(
        posts_per_page =gt 10,
        category_name =gt tutoriales, // cambiar o eliminar si usas CPT
    ), atts, listado_tutoriales )

    args = array(
        post_type =gt post,
        posts_per_page =gt intval( atts[posts_per_page] ),
        category_name =gt sanitize_text_field( atts[category_name] ),
        orderby =gt date,
        order =gt DESC,
    )

    query = new WP_Query( args )

    if ( ! query-gthave_posts() ) {
        return ltpgtNo se encontraron tutoriales.lt/pgt
    }

    output = 
    output .= lttable class=tutorials-table aria-describedby=descTablaTutorialesgt
    output .= ltcaption id=descTablaTutorialesgtListado de tutorialeslt/captiongt
    output .= lttheadgtlttrgt
    output .= ltth scope=colgtTítulolt/thgt
    output .= ltth scope=colgtCategoríalt/thgt
    output .= ltth scope=colgtFechalt/thgt
    output .= ltth scope=colgtResumenlt/thgt
    output .= lt/trgtlt/theadgt
    output .= lttbodygt

    while ( query-gthave_posts() ) {
        query-gtthe_post()
        title = esc_html( get_the_title() )
        permalink = esc_url( get_permalink() )
        date = esc_html( get_the_date( Y-m-d ) )
        excerpt = esc_html( wp_trim_words( get_the_excerpt(), 20, ... ) )
        categories = get_the_category()
        cat_name = ! empty( categories ) ? esc_html( categories[0]-gtname ) : —

        output .= lttrgt
        output .= lttdgtlta href=. permalink .gt. title .lt/agtlt/tdgt
        output .= lttdgt. cat_name .lt/tdgt
        output .= lttdgt. date .lt/tdgt
        output .= lttdgt. excerpt .lt/tdgt
        output .= lt/trgt
    }

    wp_reset_postdata()

    output .= lt/tbodygtlt/tablegt

    return output
}
add_shortcode( listado_tutoriales, shortcode_listado_tutoriales )
?gt

Notas sobre el código PHP

Escapa siempre la salida (esc_html, esc_url) para evitar XSS.
Si usas un Custom Post Type, cambia post_type =gt tutorial y elimina category_name o adáptalo a taxonomías personalizadas.
Para paginación, añade paged =gt get_query_var(paged, 1) y crea enlaces de paginación fuera del loop.

Estilos CSS sugeridos

Un CSS sencillo para una tabla legible y responsiva. Puedes ajustarlo a tu tema.

/ Básicos /
.tutorials-table {
  width: 100%
  border-collapse: collapse
  margin-bottom: 1rem
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
  font-size: 0.95rem
}
.tutorials-table caption {
  caption-side: top
  text-align: left
  font-weight: 600
  padding-bottom: 0.5rem
}
.tutorials-table th,
.tutorials-table td {
  padding: 0.75rem 0.5rem
  border: 1px solid #e6e6e6
  text-align: left
  vertical-align: top
}
.tutorials-table th {
  background: #fafafa
  font-weight: 600
}

/ Enlaces /
.tutorials-table a {
  color: #0073aa
  text-decoration: none
}
.tutorials-table a:hover {
  text-decoration: underline
}

/ Responsive: en pantallas pequeñas convertimos la tabla en bloques /
@media (max-width: 680px) {
  .tutorials-table thead {
    display: none
  }
  .tutorials-table, .tutorials-table tbody, .tutorials-table tr, .tutorials-table td {
    display: block
    width: 100%
  }
  .tutorials-table tr {
    margin-bottom: 1rem
    border: 1px solid #eee
    padding: 0.5rem
  }
  .tutorials-table td {
    border: none
    padding: 0.4rem 0.5rem
    position: relative
  }
  / Añadir etiquetas antes del contenido para identificar columnas /
  .tutorials-table td:nth-of-type(1):before{ content: Título:  font-weight:600 }
  .tutorials-table td:nth-of-type(2):before{ content: Categoría:  font-weight:600 }
  .tutorials-table td:nth-of-type(3):before{ content: Fecha:  font-weight:600 }
  .tutorials-table td:nth-of-type(4):before{ content: Resumen:  font-weight:600 }
}

Alternativas para móvil y accesibilidad

Si prefieres no transformar la tabla con CSS para móviles, otra opción es ofrecer una vista alternativa en la que cada tutorial se muestra en un bloque tipo tarjeta (lista ul/li) y ocultar la tabla en pantallas pequeñas. Esa alternativa mejora la legibilidad en pantallas estrechas.

Ejemplo conceptual: lista como alternativa (no sustituye al código anterior)

ltul class=tutorials-listgt
  ltligt
    lta href=https://tusitio.com/tutorial-ejemplogtCómo crear una tabla semánticalt/agt
    ltdivgtCategoría: HTML — Fecha: 2025-09-24lt/divgt
    ltpgtResumen breve del tutorial...lt/pgt
  lt/ligt
  lt!-- más --gt
lt/ulgt

Buenas prácticas adicionales

Incluye atributos ARIA solo cuando sea necesario no reemplazas semanticidad con ARIA.
Proporciona una caption y un id para describir la tabla si su propósito no es obvio.
Permite ordenar o filtrar la tabla si tu listado es largo (con JS progresivo), pero asegúrate de que la funcionalidad sea accesible por teclado.
Si ofreces paginación, usa enlaces paginados semánticos para SEO y accesibilidad.

Conclusión

Crear un listado de tutoriales en formato tabla con HTML semántico en WordPress es una solución robusta y accesible. Con un shortcode o plantilla personalizada, salida correctamente escapada y estilos responsivos, obtendrás una lista clara, fácil de mantener y amigable para usuarios y motores de búsqueda.

Ejemplo rápido de uso del shortcode

Coloca en el editor de una página o en un bloque de Gutenberg (bloque de shortcode):

[listado_tutoriales posts_per_page=15 category_name=tutoriales]

SushiHost