レイアウト用テーブル

行や列の見出しを持つデータテーブルに対し、メールマガジンや署名のように、配置だけに使うテーブルをレイアウト用として指定します。role="presentation" を付けるため、スクリーンリーダーは表として案内せず、各セルを通常のテキストとして読み上げます。

有効にする

この機能は layouttable.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。組み込みのツールバーには含まれません。コマンドは次のとおりです。

• insertlayouttable：カーソル位置に 2 × 2 のレイアウト用テーブルを挿入します。
• toggletablelayout：カーソル位置のテーブルをレイアウト用とデータ用で切り替えます。
• tablelayoutmode と tabledatamode：カーソル位置のテーブルを、それぞれレイアウト用またはデータ用にします。

コマンドには専用のアイコンやラベルがありません。ツールバーに置くには、svgCode_<command> と 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>

svgCode_toggletablelayout がなければ、ボタンにはエディター共通の仮アイコンを表示します。スラッシュメニューのプラグインを読み込めば、ツールバーなしでも同じ操作を使えます。/layout には「Layout table」と「Mark table as layout」、/data には「Mark table as data」が表示されます。

オプション

オプション	既定値	動作
layoutTableOutline	true	編集中のレイアウト用テーブルとセルを破線で囲みます。エディター内だけのスタイルであり、保存されません。

切り替え時の処理

レイアウト用にする場合（tablelayoutmode、またはデータテーブルでの切り替え）は、次の処理を行います。

• テーブルに role="presentation" を追加し、summary を削除します。
• すべての <th> を <td> に変え、セルから scope、headers、abbr を削除します。
• <caption> のテキストをテーブルの上の段落に移して、内容を保持します。
• <thead> の行をテーブルの本文に移します。

変更するのはテーブル自体だけです。セル内に入れ子になったデータテーブルの見出しは保持します。

データ用にする場合（tabledatamode、またはレイアウト用テーブルでの切り替え）は、ロールを削除します。同じ編集セッション内なら、元が見出しだったセルを <th> に戻します。この情報は保存しないため、再読み込み後は復元しません。その場合、API の promoteFirstRow オプションで、先頭行を scope="col" 付きの見出しにできます。スラッシュメニューの「Mark table as data」はこのオプションを使います。

キャプションと見出し行を持つデータテーブルをレイアウト用にし、再読み込みしてからデータ用に戻すと、次のようになりました。

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

再読み込みしなければ、戻したセルは再び <th> になりましたが、scope はなく、キャプションも段落のままでした。

API

• editor1.insertLayoutTable(rows, cols, { width })：レイアウト用テーブルを挿入し、その要素を返します。既定は 2 × 2、width: 100% です。
• editor1.setTableLayoutMode("layout" | "data", table, { promoteFirstRow })：table の既定値はカーソル位置のテーブルです。
• editor1.getTableLayoutMode(table) は "layout"、"data"、またはテーブルがない場合に null を返します。editor1.isLayoutTable(table) は真偽値を返します。role="presentation" と role="none" の両方をレイアウト用として扱います。
• editor1.toggleTableLayoutMode()、editor1.listLayoutTables()（文書内の全レイアウト用テーブル）、editor1.showLayoutTableOutlines(false)（破線を非表示にし、true なら表示）を使用できます。

注意点

• 挿入したレイアウト用テーブルは、次のように保存されます。

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

  クラスは追加せず、role="presentation" だけで識別します。cellpadding、cellspacing、border-collapse はメールクライアントのために付けています。
• アクセシビリティチェッカーは、レイアウト用テーブルに見出しセルを要求しません。代わりに、データテーブル用のマークアップが残っている場合に報告します。
• サニタイザーでは、table の role 属性を保持する必要があります。

関連情報：ワープロ機能のデモ、テーブル機能のデモ、メールキャンペーンのデモ。