Tabelas de layout

Marca uma tabela como tabela de layout, ou seja, uma tabela que só posiciona conteúdo (como em newsletters e assinaturas de e-mail), em oposição a uma tabela de dados com linhas e cabeçalhos de coluna. Uma tabela de layout recebe role="presentation", para que os leitores de tela leiam as células como texto simples em vez de anunciar uma grade.

Ative o recurso

O recurso é o plugin layouttable.js (também incluído em plugins/all_plugins.js). Ele não está em nenhuma barra de ferramentas incluída. Os comandos dele são:

• insertlayouttable: insere uma tabela de layout 2 × 2 na posição do cursor.
• toggletablelayout: alterna a tabela na posição do cursor entre layout e dados.
• tablelayoutmode e tabledatamode: tornam a tabela na posição do cursor uma tabela de layout ou de dados.

Os comandos não têm ícone nem rótulo próprios. Para colocá-los em uma barra de ferramentas, dê-lhes um com svgCode_<command> e text_<command>:

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/layouttable.js"></script>

<div id="div_editor1"><p>Newsletter header:</p><p><br></p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{inserttable,insertlayouttable,toggletablelayout}|{undo,redo}",
  text_insertlayouttable: "Insert layout table",
  text_toggletablelayout: "Layout / data table",
  svgCode_insertlayouttable: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="3 2"><rect x="3" y="4" width="18" height="16" rx="1"/><path d="M12 4v16"/></svg>'
});
</script>

Sem svgCode_toggletablelayout, esse botão mostra o ícone genérico de substituição do editor. Com o plugin do menu de barra carregado, as mesmas ações dispensam a barra de ferramentas: /layout oferece "Layout table" e "Mark table as layout", e /data oferece "Mark table as data".

Opções

Opção	Padrão	O que faz
layoutTableOutline	true	Desenha um contorno tracejado em volta das tabelas de layout e das células delas durante a edição. O contorno é um estilo que existe só dentro do editor; ele nunca é salvo.

O que a troca faz

Para layout (tablelayoutmode, ou alternar em uma tabela de dados):

• adiciona role="presentation" à tabela e remove summary;
• transforma todo <th> em <td> e remove scope, headers e abbr das células;
• move o texto do <caption> para um parágrafo acima da tabela, para que as palavras sejam mantidas;
• move as linhas do <thead> para o corpo.

Só a própria tabela muda; uma tabela de dados aninhada dentro de uma das células dela mantém os cabeçalhos.

Para dados (tabledatamode, ou alternar em uma tabela de layout) remove o papel. Na mesma sessão de edição, também transforma de volta em <th> as células que eram cabeçalhos. Essa memória não é salva: depois que o conteúdo é recarregado, nada é restaurado. A opção promoteFirstRow da API então transforma a primeira linha em cabeçalhos com scope="col"; o "Mark table as data" do menu de barra a usa.

Uma tabela de dados com legenda e linha de cabeçalho, trocada para layout e de volta para dados com um recarregamento no meio, passou por estas etapas:

<!-- to layout -->
<p>Prices</p>
<table role="presentation"><tbody><tr><td>Plan</td><td>Price</td></tr><tr><td>Basic</td><td>$10</td></tr></tbody></table>
<!-- reloaded, then setTableLayoutMode("data", null, { promoteFirstRow: true }) -->
<table><tbody><tr><th scope="col">Plan</th><th scope="col">Price</th></tr><tr><td>Basic</td><td>$10</td></tr></tbody></table>

Sem o recarregamento, voltar gerou de novo células <th>, mas sem o scope delas, e a legenda continuou como parágrafo.

API

• editor1.insertLayoutTable(rows, cols, { width }): insere uma tabela de layout (2 × 2 e width: 100% por padrão) e a retorna.
• editor1.setTableLayoutMode("layout" | "data", table, { promoteFirstRow }): table tem como padrão a tabela na posição do cursor.
• editor1.getTableLayoutMode(table) retorna "layout", "data" ou null (sem tabela); editor1.isLayoutTable(table) retorna um booleano. Tanto role="presentation" quanto role="none" contam como layout.
• editor1.toggleTableLayoutMode(), editor1.listLayoutTables() (todas as tabelas de layout do documento), editor1.showLayoutTableOutlines(false) (oculta o contorno tracejado; true o mostra).

O que você precisa saber

• Uma tabela de layout inserida é salva assim:

  <table role="presentation" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: collapse"><tbody><tr><td style="vertical-align: top">Acme Weekly</td><td style="vertical-align: top">Issue 42, November 2026</td></tr>…</tbody></table>

  Nenhuma classe é adicionada; role="presentation" é a marcação inteira. cellpadding, cellspacing e border-collapse estão ali para os clientes de e-mail.
• O verificador de acessibilidade não exige células de cabeçalho em uma tabela de layout e, em vez disso, informa quando uma tabela de layout ainda tem marcação de tabela de dados.
• Os sanitizadores precisam manter o atributo role em table.

Relacionados: demonstração de ferramentas de processador de texto, demonstração de suporte a tabelas, demonstração de campanha de e-mail.