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 que finalizan en el primer trimestre de 2026. 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.
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.
<table cellpadding="20">
<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.
<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>
<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>
<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.
- 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
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>
.
- Encerrar
-
Considerar recrear las tablas complejas en el editor nuevo para garantizar la compatibilidad.
Mejores prácticas para los desarrolladores y administradores de temas
- Use selectores CSS específicos que se ocupen de
.wysiwyg-table
, tablas dentro de.article-body
, o bien elementosfigure
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.