Tableaux de mise en page

Marque un tableau comme tableau de mise en page, servant uniquement à positionner le contenu (comme dans les newsletters et signatures d’e-mail), par opposition à un tableau de données avec lignes et en-têtes de colonnes. Un tableau de mise en page reçoit role="presentation" : les lecteurs d’écran lisent ainsi ses cellules comme du texte ordinaire plutôt que d’annoncer une grille.

Activation

Cette fonctionnalité est fournie par le plugin layouttable.js (également inclus dans plugins/all_plugins.js). Elle ne figure dans aucune barre d’outils intégrée. Ses commandes sont :

• insertlayouttable : insère un tableau de mise en page 2 × 2 à la position du curseur.
• toggletablelayout : bascule le tableau au niveau du curseur entre mise en page et données.
• tablelayoutmode et tabledatamode : convertissent le tableau au niveau du curseur en tableau de mise en page ou de données.

Ces commandes n’ont ni icône ni libellé propres. Pour les placer dans une barre d’outils, attribuez-leur ceux-ci avec svgCode_<command> et 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>

Sans svgCode_toggletablelayout, ce bouton affiche l’icône générique de l’éditeur. Avec le plugin de menu de commandes slash, ces actions ne nécessitent pas de barre d’outils : /layout propose « Layout table » et « Mark table as layout », et /data propose « Mark table as data ».

Options

Option	Valeur par défaut	Fonctionnement
layoutTableOutline	true	Dessine un contour en pointillés autour des tableaux de mise en page et de leurs cellules pendant l’édition. Ce style reste interne à l’éditeur et n’est jamais enregistré.

Effets du changement de type

Vers la mise en page (tablelayoutmode, ou bascule sur un tableau de données) :

• ajoute role="presentation" au tableau et retire summary ;
• convertit chaque <th> en <td> et retire scope, headers et abbr des cellules ;
• déplace le texte de <caption> dans un paragraphe au-dessus du tableau, pour conserver les mots ;
• déplace les lignes de <thead> dans le corps du tableau.

Seul le tableau lui-même change ; un tableau de données imbriqué dans une de ses cellules conserve ses en-têtes.

Vers les données (tabledatamode, ou bascule sur un tableau de mise en page) retire le rôle. Dans la même session d’édition, les cellules qui étaient des en-têtes redeviennent aussi des <th>. Cette mémoire n’est pas enregistrée : après rechargement du contenu, rien n’est restauré. L’option promoteFirstRow de l’API transforme alors la première ligne en en-têtes avec scope="col" ; le menu « Mark table as data » l’utilise.

Un tableau de données avec légende et ligne d’en-tête, converti en mise en page puis en données après rechargement, a suivi ces étapes :

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

Sans rechargement, le retour aux données a rétabli les cellules <th>, mais sans leur scope, et la légende est restée un paragraphe.

API

• editor1.insertLayoutTable(rows, cols, { width }) : insère un tableau de mise en page (2 × 2 et width: 100% par défaut) et le renvoie.
• editor1.setTableLayoutMode("layout" | "data", table, { promoteFirstRow }) : table désigne par défaut le tableau au niveau du curseur.
• editor1.getTableLayoutMode(table) renvoie "layout", "data" ou null (aucun tableau) ; editor1.isLayoutTable(table) renvoie un booléen. role="presentation" et role="none" sont tous deux considérés comme de la mise en page.
• editor1.toggleTableLayoutMode(), editor1.listLayoutTables() (tous les tableaux de mise en page du document), editor1.showLayoutTableOutlines(false) (masque le contour en pointillés ; true l’affiche).

À savoir

• Un tableau de mise en page inséré est enregistré ainsi :

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

  Aucune classe n’est ajoutée ; role="presentation" est le seul marqueur. cellpadding, cellspacing et border-collapse sont destinés aux clients de messagerie.
• Le vérificateur d’accessibilité n’exige pas de cellules d’en-tête dans un tableau de mise en page ; il signale en revanche ceux qui contiennent encore du balisage de tableau de données.
• Les filtres de nettoyage doivent conserver l’attribut role sur table.

Voir aussi : démonstration des outils de traitement de texte, démonstration des tableaux, démonstration de campagne e-mail.