¿Qué plan tengo?
Suite, todas las versiones Team, Growth, Professional, Enterprise o Enterprise Plus
Support con Guide Professional o Enterprise

Zendesk introdujo un nuevo editor de artículos en las cuentas en el segundo trimestre de 2025. La transición del editor de artículos heredado al nuevo editor de artículos tendrá lugar en cuatro fases. El nuevo editor introduce mejoras y cambios, lo que también incluye cómo se aplican estilos a las tablas a nivel de HTML y CSS.

Debido a que el nuevo editor no es 100 % compatible con el editor heredado, podrían surgir algunos problemas comunes relacionados con las tablas durante o después de la actualización al nuevo editor. Este artículo guía a los desarrolladores y administradores de temas a través de estos problemas, a la vez que les ofrece alternativas y soluciones para hacer que las tablas se ajusten al estilo de la marca como se debe.

Nota: Si encuentra problemas o soluciones adicionales, agréguelos a la sección de comentarios en la parte inferior de este artículo.
Este artículo contiene los siguientes temas:
  • Cambios al estilo de las tablas en el nuevo editor
  • Ejemplos de conversiones de tablas durante una actualización
  • Problemas comunes y cómo corregirlos
  • Mejores prácticas para los desarrolladores y administradores de temas

Cambios al estilo de las tablas en el nuevo editor

El cambio más importante en relación a las tablas en el nuevo editor de artículos es el uso de estilos CSS incorporados y aplicados directamente a los elementos de las tablas (por ejemplo, <table>, <tr> y <td>), en lugar de depender de los atributos HTML o las clases CSS externas para el estilo de las tablas. Asimismo, las tablas nuevas ahora se encierran en una etiqueta <figure>.

  • En el editor anterior, se aplicaban los estilos de tablas usando una combinación de atributos HTML (por ejemplo, cellpadding, border) y algunos CSS incorporados.

  • En el nuevo editor, la personalización de las tablas (como el ancho y el color de los bordes, el color del fondo, la altura y el ancho de las celdas, el color del texto y el relleno) se realiza estrictamente a través de estilos CSS incorporados.

Los estilos incorporados siempre tienen la máxima especificidad de CSS, lo que quiere decir:

  • El estilo CSS de temas personalizados que se ocupa de las tablas puede no anular los estilos incorporados, a menos que los selectores utilicen una especificidad igual o superior, o bien utilicen !important.

  • Los temas más antiguos y los estilos CSS que se ocupaban de los atributos HTML o de selectores de elementos sin especificidad cuidadosa pueden descubrir que sus estilos de tablas se han roto o no han sido aplicados sistemáticamente después de la actualización al editor nuevo.

Ejemplos de conversiones de tablas durante una actualización

Los siguientes ejemplos ilustran problemas que pueden ocurrir cuando se convierten tablas al nuevo editor de artículos.

El relleno de celdas fue convertido de atributo a estilo incorporado

El editor de artículos heredado usa el atributo [cellpadding] para especificar el relleno, mientras que el nuevo editor de artículos usa el estilo incorporado. Los estilos anteriores que se ocupaban de los atributos [cellpadding] o los elementos que esperan esa propiedad ya no funcionarán si no son ajustados.

HTML del editor de artículos heredado
<table cellpadding="20">
HTML del editor de artículos nuevo
<td style="padding: 20px;">

Cambios en el manejo de bordes

Los siguientes ejemplos ilustran cómo se manejan los bordes de una tabla con el editor heredado, el editor nuevo y los artículos heredados que han sido convertidos al editor nuevo.

HTML generado insertando una tabla en el editor heredado
<table style="border-collapse: collapse; width: 100%" border="1">
  <tbody>
    <tr>
      <td style="width: 50%">A</td>
      <td style="width: 50%">B</td>
    </tr>
    <tr>
      <td style="width: 50%">C</td>
      <td style="width: 50%">D</td>
    </tr>
  </tbody>
</table>
HTML generado insertando una tabla en el editor nuevo
<figure style="width: 100%" class="wysiwyg-table">
  <table style="border-style: solid; border-width: 1px">
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px">A</td>
        <td style="border-style: solid; border-width: 1px">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px">C</td>
        <td style="border-style: solid; border-width: 1px">D</td>
      </tr>
    </tbody>
  </table>
</figure>
HTML generado convirtiendo una tabla del editor heredado al editor nuevo
<figure style="width: 100%" class="wysiwyg-table wysiwyg-table-align-left">
  <table
    style="border-collapse: collapse; border-style: solid; border-width: 1px"
  >
    <tbody>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">A</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">B</td>
      </tr>
      <tr>
        <td style="border-style: solid; border-width: 1px; width: 50%">C</td>
        <td style="border-style: solid; border-width: 1px; width: 50%">D</td>
      </tr>
    </tbody>
  </table>
</figure>

Problemas comunes y cómo corregirlos

Esta sección describe varios problemas comunes que resultan de la transición de las tablas del editor heredado al editor nuevo, y cómo se pueden rectificar.

CSS de temas que no anula los estilos de tabla (relleno, bordes y colores)

Problema: el CSS del tema personalizado que antes controlaba los bordes de tablas, el relleno de celdas o los colores de fondo no se está aplicando porque ahora el editor usa estilos incorporados.

Posibles soluciones:

  • Mejorar la especificidad de CSS. Use selectores más específicos para ocuparse de elementos de tabla dentro del artículo. Si agrega !important podrá garantizar que sus estilos puedan anular los estilos incorporados.
    .article-body table,
.article-body table td {
  border: 1px solid #ccc !important;
  padding: 10px !important;
  background-color: #f9f9f9 !important;
}
  • Ocuparse del envoltorio figure. Ahora el editor envuelve las tablas dentro de elementos <figure> con clases .wysiwyg-table. Personalice el envoltorio (wrapper) según convenga, por ejemplo:
    figure.wysiwyg-table {
  margin: 1em auto;
  max-width: 90%;
}
  • Actualizar los estilos que dependen de los atributos HTML. Si sus tablas de estilos de temas usan selectores de atributos (como [cellpadding] o [border]), actualícelos para que se ocupen de la nueva estructura usando más bien clases o estilos incorporados.

Las tablas se ven diferentes después de la actualización

Problema: las tablas pierden las configuraciones de ancho o alineación, o bien se observan bordes o espaciado inusuales.

Posibles soluciones:
  • El nuevo editor coloca la tabla dentro de <figure> con ancho incorporado. Quizás tenga que hacer ajustes o anularlo.
    figure.wysiwyg-table {
  width: 100% !important;
  text-align: center;
}
figure.wysiwyg-table table {
  width: 100% !important;
  border-collapse: collapse;
}
  • Verifique los estilos predeterminados para table del tema y haga la adaptación conforme a la nueva estructura.

El HTML de tabla personalizado o complejo se rompe o necesita ajustes manuales

Problema: si tenía tablas personalizadas con atributos inusuales o estilos incorporados personalizados, es posible que la actualización del editor heredado al editor nuevo no se encargue de esto correctamente.
Nota: Cuando las tablas en el editor heredado han sido modificadas a través del código fuente o contienen HTML no compatible con el editor nuevo, este envuelve las tablas dentro de un bloque de HTML. Cuando sucede lo anterior, no podrá usar el componente de tablas del editor de artículos nuevo para editar las tablas. En su lugar, tendrá que usar el editor de código fuente para actualizar el bloque de HTML.

Posibles soluciones:

  • Revisar el código fuente HTML del artículo migrado para las tablas.
  • Ajustar o volver a escribir el HTML de la tabla personalizada para que siga el nuevo modelo, así:
    • Encerrar <table> dentro de <figure class="wysiwyg-table">.
    • Usar estilos incorporados para los bordes tanto en <table> como en <td>.

  • Considerar recrear las tablas complejas en el editor nuevo para garantizar la compatibilidad.

Mejores prácticas para los desarrolladores y administradores de temas

Aplique las siguientes mejores prácticas para reducir los problemas al mínimo a la hora de migrar las tablas al nuevo editor de artículos:
  • Use selectores CSS específicos que se ocupen de .wysiwyg-table, tablas dentro de .article-body, o bien elementos figure para envolver tablas.
  • Use !important cuidadosamente a la hora de anular los estilos incorporados.
  • Pruebe las tablas durante y después de la actualización en varios navegadores y dispositivos de distintos tamaños.
  • Instruya a los redactores de contenido acerca de la posibilidad de los estilos incorporados y la necesidad de reducir la personalización de las tablas al mínimo para que el mantenimiento sea más fácil.
  • Asegúrese de hacer copias de respaldo de su tema del centro de ayuda y del contenido del artículo antes de realizar actualizaciones por lotes o personalizaciones de envergadura.
Tecnología de Zendesk