Layout-Tabellen

Markiert eine Tabelle als Layouttabelle, die nur den Inhalt positioniert (wie in E-Mail-Newslettern und Signaturen), im Gegensatz zu einer Datentabelle mit Zeilen und Spaltenüberschriften. Eine Layouttabelle erhältrole="presentation", sodass Screenreader die Zellen als einfachen Text lesen, anstatt ein Raster anzukündigen.

Schalten Sie es ein

Die Funktion ist dielayouttable.jsPlugin (auch inplugins/all_plugins.js). Es befindet sich in keiner integrierten Symbolleiste. Seine Befehle sind:

• insertlayouttable: Fügen Sie am Caret eine 2 × 2-Layouttabelle ein.
• toggletablelayout: Wechseln Sie die Tabelle an der Einfügemarke zwischen Layout und Daten.
• tablelayoutmodeUndtabledatamode: Machen Sie die Tabelle am Caret zu einem Layout oder einer Datentabelle.

Die Befehle haben kein eigenes Symbol und keine eigene Beschriftung. Um sie in eine Symbolleiste einzufügen, geben Sie ihnen eine mitsvgCode_<command>Undtext_<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>

OhnesvgCode_toggletablelayoutDiese Schaltfläche zeigt das generische Platzhaltersymbol des Editors. Mit demSlash-MenüPlugin geladen, die gleichen Aktionen benötigen keine Symbolleiste:/layoutAngebote"Layout table"Und"Mark table as layout", Und/dataAngebote"Mark table as data" .

Optionen

Option	Standard	Was es bewirkt
layoutTableOutline	true	Zeichnet beim Bearbeiten einen gestrichelten Umriss um Layouttabellen und ihre Zellen. Die Gliederung ist nur ein Stil innerhalb des Editors; es wird nie gespeichert.

Was der Schalter bewirkt

Zum Layout (tablelayoutmode, oder auf eine Datentabelle umschalten):

• fügt role="presentation" zur Tabelle hinzu und entfernt summary;
• wandelt jedes <th> in <td> um und entfernt scope, headers und abbr aus den Zellen;
• verschiebt den <caption>-Text in einen Absatz über der Tabelle, sodass die Wörter erhalten bleiben;
• verschiebt <thead> Zeilen in den Textkörper.

Nur die Tabelle selbst ändert sich; Eine in einer ihrer Zellen verschachtelte Datentabelle behält ihre Kopfzeilen.

Zu Daten (tabledatamode oder Umschalten auf eine Layouttabelle) entfernt die Rolle. In derselben Bearbeitungssitzung werden auch die Zellen, die Kopfzeilen waren, wieder in <th> umgewandelt. Dieser Speicher wird nicht gespeichert: Nach dem erneuten Laden des Inhalts wird nichts wiederhergestellt. Die Option promoteFirstRow der API erstellt dann die ersten Zeilenüberschriften mit scope="col"; Der "Mark table as data" des Slash-Menüs verwendet es.

Eine Datentabelle mit einer Beschriftung und einer Kopfzeile, die zum Layout und zurück zu den Daten mit einem Neuladen dazwischen wechselte, durchlief diese Schritte:

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

Ohne das Neuladen ergab das Zurückschalten wieder <th>-Zellen, jedoch ohne deren scope, und die Überschrift blieb ein Absatz.

API

• editor1.insertLayoutTable(rows, cols, { width }): Fügen Sie eine Layouttabelle ein (standardmäßig 2 × 2 und width: 100%) und geben Sie sie zurück.
• editor1.setTableLayoutMode("layout" | "data", table, { promoteFirstRow }): table ist standardmäßig der Wert am Caret.
• editor1.getTableLayoutMode(table) gibt "layout", "data" oder null zurück (keine Tabelle); editor1.isLayoutTable(table) gibt einen booleschen Wert zurück. Sowohl role="presentation" als auch role="none" gelten als Layout.
• editor1.toggleTableLayoutMode(), editor1.listLayoutTables() (alle Layouttabellen im Dokument), editor1.showLayoutTableOutlines(false) (die gestrichelte Kontur ausblenden; true zeigt sie an).

Wissenswertes

• Eine eingefügte Layouttabelle wird gespeichert als:

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

  Es wird keine Klasse hinzugefügt; role="presentation" ist die gesamte Markierung. cellpadding, cellspacing und border-collapse gibt es für E-Mail-Clients.
• Die Barrierefreiheitsprüfung fragt eine Layouttabelle nicht nach Kopfzellen, sondern meldet stattdessen eine Layouttabelle, die noch über Datentabellen-Markup verfügt.
• Desinfektionsmittel müssen das Attribut role auf table beibehalten.

Verwandt: Demo für Textverarbeitungstools, Demo für Tabellenunterstützung, Demo für E-Mail-Kampagne.