Tablas de diseño

Marca una tabla como tabla de diseño, destinada únicamente a distribuir contenido (como en boletines y firmas de correo), en lugar de una tabla de datos con filas y encabezados de columna. Una tabla de diseño recibe role="presentation", para que los lectores de pantalla lean sus celdas como texto normal en vez de anunciar una cuadrícula.

Cómo activarlo

Esta función la ofrece el plugin layouttable.js (también incluido en plugins/all_plugins.js). No está en ninguna barra integrada. Sus comandos son:

• insertlayouttable: inserta una tabla de diseño de 2 × 2 en la posición del cursor.
• toggletablelayout: alterna la tabla donde está el cursor entre diseño y datos.
• tablelayoutmode y tabledatamode: convierte la tabla donde está el cursor en una tabla de diseño o de datos.

Los comandos no tienen icono ni etiqueta propios. Para colocarlos en una barra de herramientas, asígnales uno con svgCode_<command> y 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>

Sin svgCode_toggletablelayout , ese botón muestra el icono genérico de ejemplo del editor. Con el plugin menú de comandos con barra cargado, las mismas acciones no necesitan barra de herramientas: /layout ofrece "Layout table" y "Mark table as layout", y /data ofrece "Mark table as data".

Opciones

Opción	Valor predeterminado	Función
layoutTableOutline	true	Dibuja un contorno discontinuo alrededor de las tablas de diseño y sus celdas durante la edición. Es un estilo exclusivo del editor; nunca se guarda.

Qué hace la conversión

A diseño (tablelayoutmode, o al alternar una tabla de datos):

• añade role="presentation" a la tabla y elimina summary;
• convierte cada <th> en <td> y elimina scope, headers y abbr de las celdas;
• mueve el texto de <caption> a un párrafo anterior a la tabla para conservar las palabras;
• mueve las filas de <thead> al cuerpo.

Solo cambia la tabla en sí; una tabla de datos anidada en una de sus celdas conserva sus encabezados.

A datos (tabledatamode, o al alternar una tabla de diseño) elimina el rol. En la misma sesión de edición, también vuelve a convertir las celdas que eran encabezados en <th>. Esa información no se guarda: al recargar el contenido no se restaura nada. La opción promoteFirstRow de la API convierte entonces la primera fila en encabezados con scope="col"; la entrada "Mark table as data" del menú de comandos con barra la usa.

Una tabla de datos con leyenda y fila de encabezados, convertida a diseño y de nuevo a datos con una recarga entre ambas conversiones, pasó por estos pasos:

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

Sin recargar, al volver a datos se recuperaron las celdas <th> , pero sin su scope, y la leyenda siguió siendo un párrafo.

API

• editor1.insertLayoutTable(rows, cols, { width }): inserta una tabla de diseño (de 2 × 2 y width: 100% de forma predeterminada) y la devuelve.
• editor1.setTableLayoutMode("layout" | "data", table, { promoteFirstRow }): table es de forma predeterminada la tabla donde está el cursor.
• editor1.getTableLayoutMode(table) devuelve "layout", "data" o null (no hay tabla); editor1.isLayoutTable(table) devuelve un booleano. Tanto role="presentation" y role="none" se consideran de diseño.
• editor1.toggleTableLayoutMode(), editor1.listLayoutTables() (todas las tablas de diseño del documento), editor1.showLayoutTableOutlines(false) (oculta el contorno discontinuo; true lo muestra).

Aspectos a tener en cuenta

• Una tabla de diseño insertada se guarda como:

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

  No se añade ninguna clase; role="presentation" es toda la marca. cellpadding, cellspacing y border-collapse están ahí para los clientes de correo.
• El comprobador de accesibilidad no exige celdas de encabezado en una tabla de diseño y, en cambio, informa si conserva marcado de tabla de datos.
• Los sanitizadores deben conservar el atributo role en table.

Relacionado: demo de herramientas de procesador de texto, demo de compatibilidad con tablas, demo de campañas de correo.