Tables

For price lists, schedules and comparisons. Pick a size from the table button, then put the caret in the table to get its editing bar above it.

createEditor('#editor', {
  toolbar: 'heading | bold color | table | undo redo',
});

Inserting a table

• The table button opens a 10 × 10 grid. Hover to choose the size and click. From the keyboard, use the arrow keys and Enter.
• On an empty line, type / and pick "Table" for a 3 × 3 table (Slash menu).
• Tables copied from Excel, HWP or Word keep their structure, merged cells included (Paste cleanup).

The table bar

With the caret in a table, a bar shows above it. From the left:

Selecting and moving

• Drag from one cell to another to select a rectangle of cells. Merged cells widen the rectangle as needed.
• Tab moves to the next cell, Shift+Tab to the previous one. Tab in the last cell adds a row.
• Point at the right edge of a cell and drag to resize the column (30px minimum). On the first drag every column is fixed at its current width, so only the dragged one changes.

Saved HTML

The look is stored as inline styles, so the table looks the same on a page without any extra CSS.

<div data-table-wrap="" style="overflow-x: auto">
  <table style="border-collapse: collapse; width: 100%"><tbody>
    <tr><th style="border: 1px solid #d0d5dd; …; background-color: #f2f4f7; font-weight: 600" scope="col">Plan</th>…</tr>
    <tr><td style="border: 1px solid #d0d5dd; padding: 6px 8px; vertical-align: top">Basic</td>…</tr>
  </tbody></table>
</div>

The outer div[data-table-wrap] comes from responsiveOutput (on by default): on narrow phone screens the table scrolls sideways instead of overflowing the page. It is taken off again when the HTML is loaded back into the editor.

From code

Every button on the table bar is an editor.exec() command, so your own buttons and shortcuts can do the same.

editor.exec('insertTable', '4x3');   // 4 rows, 3 columns
editor.exec('rowBelow');             // rowAbove, colLeft, colRight
editor.exec('deleteRow');            // deleteCol, deleteTable
editor.exec('mergeCells');           // splitCell
editor.exec('headerRow');
editor.exec('cellColor', '#fff3bf'); // '' removes the color
editor.exec('cellVAlign', 'middle'); // top | middle | bottom
editor.exec('tableBorder', '0');     // 0 | 1 | 2 | 3 (px)

Presets and phones

The table button is on the first row of the basic, board (default) and full presets, not in minimal. On phones the default board toolbar keeps one row of essentials, so the table button moves under ⋯.

Options