Introducción

Este tutorial explica con todo lujo de detalles cómo optimizar el espaciado del bloque Tabla de Gutenberg en WordPress mediante CSS. Cubriremos qué elementos afectan al espaciado (márgenes de bloque, relleno de celdas, separación entre celdas), patrones habituales (zebra stripes, cabecera fija, tablas responsivas) y ejemplos concretos listos para pegar en tu tema o en CSS adicional. También verás cómo aplicar estilos solo en editor o front-end y cómo dirigirte a variaciones de estilo del bloque Tabla.

Por qué es importante controlar el espaciado

El espaciado de una tabla influye en legibilidad, accesibilidad y en la estética general de la página. Los problemas más frecuentes son:

• Relleno de celdas excesivo o insuficiente que dificulta la lectura.
• Separación entre filas o celdas inconsistente por el uso de border-collapse o border-spacing.
• Espacio entre el bloque Tabla y bloques adyacentes que no coincide con el resto del diseño.
• Problemas en dispositivos móviles: la tabla se corta o se ve demasiado comprimida.

Anatomía del bloque Tabla en Gutenberg

Gutenberg genera una estructura con una envoltura que contiene una etiqueta lttablegt. La clase de envoltura suele ser wp-block-table y, si el usuario aplica estilos de bloque (como franjas), también se añade algo como is-style-stripes. El CSS puede dirigirse a la envoltura (.wp-block-table), al elemento tabla (.wp-block-table table), o a filas y celdas (tr, td, th).

Estrategia general

1. Reset visual básico: asegurar un comportamiento consistente (border-collapse o border-spacing según convenga).
2. Establecer rellenos (padding) en td y th para controlar la densidad de la tabla.
3. Controlar margen inferior del bloque para ajustar separación entre bloques (o usar la variable de bloque global).
4. Hacer la tabla responsiva mediante overflow-x y min-width/table-layout.
5. Opciones avanzadas: cabecera fija con position: sticky, franjas, y separación entre celdas con border-spacing.

Ejemplos prácticos de CSS

Los ejemplos siguientes se pueden pegar en Apariencia → Personalizar → CSS adicional, en el CSS de tu tema hijo o en un archivo CSS que enqueues desde functions.php.

1) Reset y espaciado base

Este bloque normaliza la tabla para que el comportamiento sea predecible y establece un relleno cómodo:

.wp-block-table table {
  width: 100%
  border-collapse: collapse / evita espacio entre celdas /
  table-layout: auto / o fixed si quieres columnas igualadas /
  margin: 0
}

.wp-block-table th,
.wp-block-table td {
  padding: 0.65rem 0.9rem / ajusta para más o menos densidad /
  vertical-align: middle
  border: 1px solid rgba(0,0,0,0.08) / línea sutil /
  text-align: left
}

/ Control del espacio alrededor del bloque (separación entre bloques) /
.wp-block-table {
  margin: 0 0 var(--wp--style--block-gap, 1.5rem) / respeta la variable global si existe /
}

2) Alternativa: usar border-spacing para separaciones visibles entre celdas

Si prefieres que las celdas no estén fusionadas y quieres espacio entre ellas, usa border-collapse: separate y border-spacing:

.wp-block-table table {
  border-collapse: separate
  border-spacing: 12px 6px / horizontal vertical /
  background-clip: padding-box / evita que las esquinas se muestren cortadas /
}

.wp-block-table th,
.wp-block-table td {
  padding: 0.6rem 0.9rem
  border-radius: 6px / si quieres bordes redondeados en cada celda /
  background: #fff / necesitado si hay border-spacing para ver el espaciado /
  box-shadow: 0 0 0 1px rgba(0,0,0,0.03) inset
}

3) Franjas (zebra stripes) respetando el espaciado

Targetea la variación que Gutenberg añade (is-style-stripes) o aplica un estilo general:

/ Estilo cuando el bloque tiene la clase is-style-stripes /
.wp-block-table.is-style-stripes table tr:nth-child(even) td {
  background-color: rgba(0,0,0,0.03)
}

/ Si usas border-spacing, aplicamos color a las celdas /
.wp-block-table.is-style-stripes table tr:nth-child(even) td,
.wp-block-table.is-style-stripes table tr:nth-child(even) th {
  background-color: rgba(0,0,0,0.03)
}

4) Cabecera fija (sticky) con manejo de espacio

Una cabecera fija es útil cuando la tabla es larga. Ten en cuenta que position: sticky funciona mejor con overflow controlado en contenedores:

.wp-block-table {
  overflow-x: auto / necesaria para que la tabla sea scrolleable en móvil /
  -webkit-overflow-scrolling: touch
}

.wp-block-table thead th {
  position: sticky
  top: 0
  z-index: 2 / encima de las filas /
  background: #fff / fondo para que no se vea through /
  backdrop-filter: saturate(120%) / opcional, suaviza el fondo /
}

/ Si hay un encabezado con sombra para separar visualmente /
.wp-block-table thead th::after {
  content: 
  position: absolute
  left: 0
  right: 0
  bottom: -1px
  height: 1px
  background: rgba(0,0,0,0.06)
}

5) Responsividad y manejo del espaciado en móviles

En pantallas pequeñas conviene reducir paddings y permitir scroll horizontal en tablas anchas:

@media (max-width: 700px) {
  .wp-block-table th,
  .wp-block-table td {
    padding: 0.45rem 0.6rem / menos padding en móviles /
    font-size: 0.95rem
  }

  / lateral scroll pero con padding para no pegar la tabla al borde /
  .wp-block-table {
    margin-left: -1rem
    margin-right: -1rem
    padding-left: 1rem
    padding-right: 1rem
  }
}

Aplicar estilos solo en el editor (opcional)

Si quieres que el espaciado cambie solo en el editor de bloques (para que el editor sea más cómodo sin alterar el front-end), añade estilos al editor con editor-styles o con un enqueue que use la constante is_admin() o la función adecuada. Ejemplo de enqueue en functions.php:

/ functions.php: encolar estilos para el editor de bloques /
function mi_tema_editor_table_styles() {
  wp_enqueue_style(
    mi-tema-editor-table,
    get_stylesheet_directory_uri() . /css/editor-table-styles.css,
    array(),
    1.0
  )
}
add_action(enqueue_block_editor_assets, mi_tema_editor_table_styles)

Consejos avanzados y buenas prácticas

• Prioriza la accesibilidad: mantén un contraste suficiente en bordes y fondos de franjas, y no reduzcas demasiado el padding en dispositivos táctiles.
• Evita !important salvo cuando no haya alternativa. Mejor usar selectores más específicos (por ejemplo, añadir la clase del tema: .mi-tema .wp-block-table).
• Respetar variables de theme.json: si tu tema usa theme.json, intenta usar variables CSS globales como –wp–style–block-gap para mantener consistencia.
• Prueba en varios navegadores y dispositivos: la propiedad position: sticky y backdrop-filter tienen compatibilidades distintas.
• Evita establecer alturas fijas en celdas: que el contenido determine la altura garantiza mejor adaptabilidad.

Ejemplo final: combinación de todo (compacta y elegante)

Este snippet ofrece un aspecto limpio, franjas sutiles, cabecera sticky y buena experiencia móvil:

.wp-block-table {
  margin: 0 0 var(--wp--style--block-gap, 1.25rem)
  overflow-x: auto
}

.wp-block-table table {
  width: 100%
  border-collapse: collapse
  table-layout: auto
  min-width: 560px / permite scroll cuando la tabla es muy ancha /
}

.wp-block-table th,
.wp-block-table td {
  padding: 0.6rem 0.9rem
  border-bottom: 1px solid rgba(0,0,0,0.06)
  text-align: left
  vertical-align: middle
}

.wp-block-table thead th {
  position: sticky
  top: 0
  background: #ffffff
  z-index: 3
}

/ Franjas sutiles /
.wp-block-table tr:nth-child(even) td {
  background-color: rgba(0,0,0,0.02)
}

/ Móviles: menor padding y sin min-width forzado /
@media (max-width: 640px) {
  .wp-block-table table {
    min-width: auto
  }
  .wp-block-table th,
  .wp-block-table td {
    padding: 0.45rem 0.6rem
  }
}

Resumen práctico

Para optimizar el espaciado del bloque Tabla de Gutenberg actúa sobre cuatro frentes: 1) normalizar el borde y el colapso de celdas 2) ajustar padding en th/td 3) controlar margen del bloque para la separación entre bloques (o usar la variable global) 4) asegurar responsividad con overflow-x y media queries. Usa selectores que apunten a .wp-block-table y sus elementos internos, y aplica variantes a .wp-block-table.is-style-stripes si quieres respetar estilos de usuario.

Dónde poner este CSS

1. Apariencia → Personalizar → CSS adicional (rápido y directo).
2. Archivo CSS del tema hijo (recomendado para proyectos serios).
3. Encolar un archivo CSS desde functions.php para un control más fino (mencionado arriba).

Con los fragmentos y las pautas anteriores podrás conseguir tablas en Gutenberg con un espaciado y una ergonomía consistentes con el diseño del sitio, legibles en móvil y con opciones avanzadas como cabecera fija y franjas sin sacrificar accesibilidad.