Qual é o meu plano?
Suite, todas as versões Team, Growth, Professional, Enterprise ou Enterprise Plus
Support com Guide Professional ou Enterprise

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. 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.

Observação: se você encontrar outros problemas ou soluções, inclua-os na seção de comentários no final deste artigo.
Este artigo inclui os tópicos a seguir:
  • Alterações no estilo da tabela no novo editor
  • Exemplos de conversões de tabelas durante a atualização
  • Problemas comuns e como corrigi-los
  • Práticas recomendadas para desenvolvedores e administradores de temas

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.

HTML do editor de artigos legado
<table cellpadding="20">
HTML do novo editor de artigos
<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.

HTML gerado pela inserção de uma tabela no editor legado
<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 gerado pela inserção de uma tabela no novo editor
<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 gerado pela conversão de uma tabela do editor legado para o novo editor
<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.

Possíveis soluções:
  • 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

Problema: se você tinha tabelas personalizadas com atributos incomuns ou estilos embutidos personalizados, a atualização do editor legado para o novo editor pode não os processar corretamente.
Observação: quando as tabelas no editor legado são modificadas por meio do código-fonte ou contêm HTML incompatível com o novo editor, o novo editor envolve as tabelas dentro de um bloco HTML. Quando isso ocorre, não é possível usar o novo componente de tabelas do editor de artigos para editá-las. Em vez disso, use o editor de código-fonte para atualizar o bloco HTML.

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>.

  • Considere recriar tabelas complexas no novo editor para garantir a compatibilidade.

Práticas recomendadas para desenvolvedores e administradores de temas

Use as seguintes práticas recomendadas para minimizar problemas ao migrar tabelas para o novo editor de artigos:
  • Use seletores CSS específicos voltados para .wysiwyg-table, tabelas dentro de .article-body ou elementos figure 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.
Powered by Zendesk