A Zendesk introduziu um novo editor de artigos nas contas, no segundo trimestre de 2025. A transição do editor de artigos legado para o novo editor de artigos ocorrerá em quatro fases, terminando no primeiro trimestre de 2026. O novo editor apresenta melhorias e alterações, incluindo a maneira como as tabelas são estilizadas nos níveis HTML e CSS.
Como o novo editor não é 100% compatível com o editor legado, alguns problemas comuns relacionados a tabelas podem surgir durante ou após a atualização para o novo editor. Este artigo orienta desenvolvedores e administradores de temas sobre esses problemas, além de oferecer alternativas e soluções para garantir que as tabelas se adaptem ao estilo da marca conforme o esperado.
Alterações no estilo da tabela no novo editor
A mudança mais significativa para tabelas no novo editor de artigos é o uso de estilos CSS embutidos aplicados diretamente aos elementos da tabela (por exemplo, <table>
, <tr>
e <td>
), em vez da dependência de atributos HTML ou classes CSS externas para estilizar tabelas. As novas tabelas agora também ficam entre uma tag <figure>.
-
No editor anterior, os estilos de tabela eram aplicados usando uma combinação de atributos HTML (por exemplo,
cellpadding
,border
) e CSS embutido. -
No novo editor, a personalização de tabelas (como largura da borda, cor da borda, cor de fundo, altura/largura da célula, cor do texto e preenchimento) é aplicada estritamente como estilos CSS embutidos.
Os estilos embutidos sempre têm a maior especificidade CSS, isso significa que:
-
O estilo CSS de temas personalizados voltado para tabelas pode não substituir esses estilos embutidos, a menos que os seletores usem uma especificidade igual/maior ou usem
!important
. -
Temas mais antigos e estilos CSS voltados para atributos HTML ou seletores de elementos sem especificidade detalhada podem observar que seus respectivos estilos de tabela não funcionam corretamente ou foram aplicados de maneira inconsistente após a atualização para o novo editor.
Exemplos de conversões de tabelas durante a atualização
Os exemplos a seguir ilustram problemas que podem ocorrer ao converter tabelas para o novo editor de artigos.
Preenchimento de célula convertido de atributo para estilo embutido
O editor de artigos legado usa o atributo [cellpadding]
para especificar o preenchimento, já o novo editor de artigos usa a estilização embutida. Estilos anteriores voltados a atributos [cellpadding]
ou elementos que esperavam essa propriedade não funcionarão mais até que sejam ajustados.
<table cellpadding="20">
<td style="padding: 20px;">
Mudanças no tratamento de bordas
Os exemplos a seguir ilustram como as bordas da tabela são tratadas com o editor legado, o novo editor e artigos legados convertidos para o novo editor.
<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 comuns e como corrigi-los
Esta seção descreve vários problemas comuns resultantes da transição de tabelas do editor legado para o novo editor e como você pode corrigi-los.
O CSS do tema não substitui os estilos da tabela (preenchimento, bordas e cores)
Problema: o CSS do tema personalizado que controlava anteriormente as bordas da tabela, o preenchimento das células ou as cores de fundo não está sendo aplicado porque o editor agora usa estilos embutidos.
Possíveis soluções:
-
Aumentar a especificidade CSS: use seletores mais específicos voltados a elementos da tabela dentro do artigo. Adicionar
!important
garante que seus estilos substituam os estilos embutidos..article-body table, .article-body table td { border: 1px solid #ccc !important; padding: 10px !important; background-color: #f9f9f9 !important; }
-
Especificar o envoltório de figura: o editor agora coloca as tabelas dentro de elementos
<figure>
com classes.wysiwyg-table
. Personalize o envoltório conforme necessário:figure.wysiwyg-table { margin: 1em auto; max-width: 90%; }
-
Atualizar estilos que dependem de atributos HTML: se o seu tema usa seletores de atributos (como
[cellpadding]
e[border]
) para o estilo das tabelas, atualize-os para que sejam voltados à nova estrutura usando classes ou estilos embutidos.
As tabelas parecem diferentes após a atualização
Problema: as tabelas perdem as configurações de largura ou alinhamento, ou você vê bordas e espaçamentos inesperados.
- o novo editor coloca a tabela dentro de uma
<figure>
com largura embutida. Pode ser necessário ajustar ou substituir.figure.wysiwyg-table { width: 100% !important; text-align: center; } figure.wysiwyg-table table { width: 100% !important; border-collapse: collapse; }
- Verifique os estilos padrão de
table
do seu tema e adapte-os à nova estrutura.
A tabela HTML personalizada ou complexa não funciona ou precisa de ajuste manual
Possíveis soluções:
- Revise o código-fonte HTML do artigo migrado para tabelas.
- Ajuste ou reescreva o HTML da tabela personalizada para seguir o novo modelo:
- Coloque
<table>
dentro de<figure class="wysiwyg-table">
. - Use estilos embutidos para bordas em
<table>
e<td>
.
- Coloque
-
Considere recriar tabelas complexas no novo editor para garantir a compatibilidade.
Práticas recomendadas para desenvolvedores e administradores de temas
- Use seletores CSS específicos voltados para
.wysiwyg-table
, tabelas dentro de.article-body
ou elementosfigure
para envolver tabelas. - Use
!important
com atenção para substituir estilos embutidos. - Teste as tabelas durante e após a atualização em vários navegadores e tamanhos de dispositivos.
- Forneça orientação a escritores de conteúdo sobre a possibilidade do uso de estilos embutidos e a necessidade de limitar as personalizações de tabela para facilitar a manutenção.
- Faça backup do tema da sua central de ajuda e do conteúdo do artigo antes de fazer atualizações em lote ou personalizações significativas.