Important changes to Tiny Cloud pricing > Find out more

Table plugin

Table editing features.

Contribute to this page
+ toolbar button + menu item

The table plugin adds table management functionality to TinyMCE. It also adds a new menubar item Table with various options in its dropdown including Insert table and options to modify cells, rows and columns, and a toolbar button with the same functionality.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});

Config Options

These settings affect the execution of the table plugin and let you modify the default styles and attributes for tables, preset class lists, and table behavior.

table_toolbar

This option allows you to specify the toolbar buttons shown on the contextual toolbar for tables. Provide a space-separated list of toolbar buttons in the order they should be shown. To create groups on the toolbar, use the | pipe character to add a separator between toolbar buttons.

To disable the table toolbar, set the value to an empty string.

Type: String

Default Value: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'

Possible Values: Any toolbar button. For a list of predefined toolbar buttons, see: Toolbar Buttons Available for TinyMCE.

Example: Default table_toolbar configuration
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'
});
Example: Disable the table toolbar

To disable or remove the contextual table toolbar, set table_toolbar to an empty string.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_toolbar: ''
});

table_appearance_options

This option allows you to disable some of the options available to a user when inserting or editing a table. When set to false the following fields will not appear: Cell spacing, Cell padding, Border and Caption.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_appearance_options: false
});

table_clone_elements

This option enables you to specify which elements should be cloned as empty children when inserting rows/columns to a table. By default it will clone these ‘strong em b i span font h1 h2 h3 h4 h5 h6 p div’ into new cells.

Type: String

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_clone_elements: 'strong em a'
});

table_grid

This option allows you to disable the grid-like table picker in the Table menu. The grid feature (which is enabled by default) consists of a dragable matrix that a user can interact with to automatically create a table of x-rows by x-columns based upon their input.

However, if table_grid is set to false the table picker will be replaced by a menu item that opens a dialog that users can use to insert a table. This dialog allows users to set various parameters such as the number of columns and rows, width, height, cell spacing and padding, border width, alignment, and whether to display a caption. There are also advanced style options available if table_advtab is set to true.

Note: To configure the Table menu to include both the table picker and the table dialog menu items, set table_grid to true and configure menu to include both the inserttable and inserttabledialog menu items.

Type: Boolean

Default Value: true

Possible Values: true, false

Note: The default option for this setting is different for mobile devices. For information on the default mobile setting, see: TinyMCE Mobile - Configuration settings with mobile defaults.

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_grid: false
});

table_tab_navigation

This option enables you to disable the default tab between table cells feature. By default, when a user presses tab the cursor will move between cells within the table. By setting the table_tab_navigation value to false the cursor will tab between browser elements (such as the URL bar or form fields, etc).

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_tab_navigation: false
});

table_default_attributes

This option enables you to specify default attributes for inserted tables.

Type: Object

Default Value: { border: '1' }

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_default_attributes: {
    border: '1'
  }
});

table_default_styles

This option enables you to specify the default styles for inserted tables.

Type: Object

Default Value: { 'border-collapse': 'collapse', 'width': '100%' }

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_default_styles: {
    width: '50%'
  }
});

table_responsive_width

Note: This option was deprecated with the release of TinyMCE 5.4. This option has been replaced by table_sizing_mode.

This option enables you to force pixels or percentage sizes for tables. Setting this to true will force resizing by percentages and setting this to false will force pixel resizing. The default is to automatically detect what the table size is and just use that unit for resizing.

Type: Boolean

Default Value: none

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_responsive_width: false
});

table_sizing_mode

Note: This feature is only available for TinyMCE 5.4 and later.

The table_sizing_mode option enforces the table sizing method used for new and modified tables (including resizing operations on tables). This option only impacts the width of tables and cells and does not apply to the height of tables and cells.

This option accepts the following values:

  • fixed - Use pixel-based widths.
  • relative - Use percent-based widths.
  • responsive - Use no specified widths. Note: If a responsive table is resized, it will be converted to a relative table (a table cannot be resized without widths).
  • auto - Detects the table sizing based on the width style or attribute and attempts to keep the current sizing mode.

Type: String

Default Value: 'auto'

Possible Values: 'fixed', 'relative', 'responsive', 'auto'

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_sizing_mode: 'relative'
});

table_class_list

This option enables you to specify a list of classes to present in the table options dialog box. This is useful if you want users to assign predefined classes to table elements.

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_class_list: [
    {title: 'None', value: ''},
    {title: 'Dog', value: 'dog'},
    {title: 'Cat', value: 'cat'}
  ]
});

table_cell_class_list

This option enables you to specify a list of classes to present in the table cell options dialog box. This is useful if you want users to assign predefined classes to table cells.

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_cell_class_list: [
    {title: 'None', value: ''},
    {title: 'Dog', value: 'dog'},
    {title: 'Cat', value: 'cat'}
  ]
});

table_row_class_list

This option enables you to specify a list of classes to present in the table row options dialog. This is useful if you want users to assign predefined classes to table rows.

Type: Array

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_row_class_list: [
    {title: 'None', value: ''},
    {title: 'Dog', value: 'dog'},
    {title: 'Cat', value: 'cat'}
  ]
});

table_advtab

This option makes it possible to disable the advanced tab in the table dialog box. The advanced tab allows a user to input style, border color and background color values.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_advtab: false
});

table_cell_advtab

This option makes it possible to disable the advanced tab in the table cell dialog box. The advanced tab allows a user to input style, border color and background color values.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_cell_advtab: false
});

table_row_advtab

This option makes it possible to disable the advanced tab in the table row dialog box. The advanced tab allows a user to input style, border color and background color values.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_row_advtab: false
});

table_resize_bars

This option makes it possible to disable the ability to resize table columns and rows by dragging the border between two columns or rows.

Type: Boolean

Default Value: true

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_resize_bars: false
});

table_style_by_css

This option enables you to force the Table Properties dialog to use HTML5/CSS3 standards for setting cell spacing and cellpadding. By default, these are added as attributes to the table element. By setting this to true, cell spacing is applied to the table element as a border-spacing style and cell padding is applied to all td elements as a padding style.

Type: Boolean

Default Value: false

Possible Values: true, false

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_style_by_css: false
});

table_header_type

Note: This feature is only available for TinyMCE 5.4 and later.

The table_header_type option affects how tables are structured when a table row is set as a header row. Note that this setting does not affect header columns.

The table_header_type option has four different settings: 'section’, 'cells', 'sectionCells', and 'auto'.

  • section - When a table row is set as a header row, the row (tr) is moved to the thead element. The cell types (td and/or th) are unaffected.

    For example:

    <table>
      <thead>
        <tr>
          <td>&nbsp;</td>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
    
  • cells - When a table row is set as a header row, the row (tr) moves to the tbody element (if in a thead element). All table data cell elements (td) in the row are changed to table header cell elements (th).

    For example:

    <table>
      <tbody>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
    
  • sectionCells - When a table row is set as a header row, the row (tr) is moved to the thead element. All cells in the row are changed to table header cell elements (th).

    For example:

    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
    
  • auto - Finds the first existing header row in the table and uses the same structure. If no other table header row exists, the section header type will be applied.

Type: String

Default Value: 'section'

Possible Values: 'section’, 'cells', 'sectionCells', 'auto'

Example
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  menubar: 'table',
  toolbar: 'table',
  table_header_type: 'sectionCells'
});

Examples of various table setups

Here are some examples of configuration for common setups.

No default attributes or styles on tables

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_default_attributes: {},
  table_default_styles: {}
});

Pixel based resizing

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_default_attributes: {},
  table_default_styles: {},
  table_responsive_width: false
});

Percentage based resizing

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_default_attributes: {
    'border': '1'
  },
  table_default_styles: {
    'border-collapse': 'collapse',
    'width': '100%'
  },
  table_responsive_width: true
});

Note: The advanced tabs of the table, row, and cell properties dialogs use the colorpicker to allow for border and background colors to be applied. See docs to use and configure a custom colorpicker.

Toolbar buttons

The Table plugin provides the following toolbar buttons:

Toolbar button identifier Description
table Creates/Edits table elements.
tablecellprops Opens the Cell properties dialog.
tablecopyrow Copies the current row to the clipboard. > Note: This feature is only available for TinyMCE 5.4 and later.
tablecutrow Cuts the current row to the clipboard. > Note: This feature is only available for TinyMCE 5.4 and later.
tabledelete Deletes table.
tabledeletecol Deletes the selected column.
tabledeleterow Deletes the current row row.
tableinsertdialog Opens the table properties dialog for creating a new table.
tableinsertcolafter Inserts column after the current one.
tableinsertcolbefore Inserts a column before the current one.
tableinsertrowafter Inserts a new row after the current one.
tableinsertrowbefore Inserts a new row before the current one.
tablemergecells Merges the selected cells.
tablepasterowafter Pastes the row in the clipboard after the current row. > Note: This feature is only available for TinyMCE 5.4 and later.
tablepasterowbefore Pastes the row in the clipboard before the current row. > Note: This feature is only available for TinyMCE 5.4 and later.
tableprops Opens the table properties dialog.
tablerowprops Opens the Row properties dialog.
tablesplitcells Splits the current merged cell.

These toolbar buttons can be added to the editor using:

Menu items

The Table plugin provides the following menu items:

Menu item identifier Default Menu Location Description
inserttable Table Inserts table grid menu.
inserttabledialog Not Applicable Opens the table properties dialog for creating a new table.
tableprops Table Opens the table properties dialog.
deletetable Table Deletes the current table.
cell Table Cell menu item with related controls.
tablemergecells Table Merges all currently selected cells > Note: This feature is only available for TinyMCE 5.4 and later.
tablesplitcells Table Splits merged cells > Note: This feature is only available for TinyMCE 5.4 and later.
tablecellprops Table Opens the cell properties dialog > Note: This feature is only available for TinyMCE 5.4 and later.
column Table Column menu item with related controls.
tableinsertcolumnbefore Table Insert column before the currently selected column > Note: This feature is only available for TinyMCE 5.4 and later.
tableinsertcolumnafter Table Insert column after the currently selected column > Note: This feature is only available for TinyMCE 5.4 and later.
tabledeletecolumn Table Deletes curently selected column or columns > Note: This feature is only available for TinyMCE 5.4 and later.
row Table Row menu item with related controls.
tableinsertrowbefore Table Inserts row before the currently selected row > Note: This feature is only available for TinyMCE 5.4 and later.
tableinsertrowafter Table Inserts row after the currently selected row > Note: This feature is only available for TinyMCE 5.4 and later.
tablecutrow Table Cut curently selected row or rows > Note: This feature is only available for TinyMCE 5.4 and later.
tablecopyrow Table Copy curently selected row or rows > Note: This feature is only available for TinyMCE 5.4 and later.
tablepasterowbefore Table Paste row before the currently selected row > Note: This feature is only available for TinyMCE 5.4 and later.
tablepasterowafter Table Paste row afterthe currently selected row > Note: This feature is only available for TinyMCE 5.4 and later.
tablerowprops Table Opens the row properties dialog
tabledeleterow Table Deletes curently selected row or rows > Note: This feature is only available for TinyMCE 5.4 and later.

These menu items can be added to the editor using:

API

Name Arguments Description
insertTable columns: number, rows: number Insert a table with the given number of columns and rows at the current cursor location
getClipboardCols   Returns the data for any columns cut or copied using mceTableCutCol or mceTableCopyCol. > Note: This feature is only available for TinyMCE 5.4 and later.
setClipboardCols cols: HTMLTableRowElement[] Set the data to be used by mceTablePasteColBefore or mceTablePasteColAfter for pasting columns into a table. (A column as a series of cells. One or more cells from each row in the selection). > Note: This feature is only available for TinyMCE 5.4 and later.
getClipboardRows   Returns the data for any rows cut or copied using mceTableCutRow or mceTableCopyRow
setClipboardRows rows: HTMLTableRowElement[] Set the data to be used by mceTablePasteRowBefore or mceTablePasteRowAfter for pasting rows into a table.

Example

tinymce.activeEditor.plugins.table.insertTable(2, 3);

Events

Name Description
newrow Fired when a row is created
newcell Fired when a cell is created
ObjectResizeStart Fired when a resize action is started on a table, row, column or cell using the resize bars
ObjectResized Fired when a resize action is finished on a table, row, column or cell using the resize bars

Commands

The Table plugin provides the following JavaScript commands.

Note: Table row and table column cut, copy, and paste commands work with TinyMCE’s internal table clipboard, not the user’s system clipboard.

Command Description
mceTableSizingMode When table_sizing_mode is set to 'auto', this command sets the sizing mode of the currently selected table. For information on table sizing modes, see: Table plugin - table_sizing_mode. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableApplyCellStyle Applies the specified styles to the selected cells. The following styles can be changed with this command: background-color, border-color, border-style, and border-width. Providing an empty value for a style will remove the style, such as { 'background-color': '' }. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableSplitCells Splits the current merged table cell.
mceTableMergeCells Merges the selected cells.
mceTableInsertRowBefore Inserts a row before the current row.
mceTableInsertRowAfter Inserts a row after the current row.
mceTableInsertColBefore Inserts a column before the current column.
mceTableInsertColAfter Inserts a column after the current column.
mceTableDeleteCol Deletes the current column.
mceTableDeleteRow Deletes the current row.
mceTableCutRow Cuts the current row to the TinyMCE clipboard.
mceTableCutCol Cuts the current column to the TinyMCE clipboard. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableCopyRow Copies the current row to the TinyMCE clipboard.
mceTableCopyCol Copies the current column to the TinyMCE clipboard. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTablePasteRowBefore Paste the TinyMCE clipboard row before the current row.
mceTablePasteRowAfter Paste the TinyMCE clipboard row after the current row.
mceTablePasteColBefore Paste the TinyMCE clipboard column before the current row. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTablePasteColAfter Paste the TinyMCE clipboard column after the current row. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableDelete Deletes the current table.
mceInsertTable Opens the insert/edit table dialog or inserts a table without using a dialog if additional arguments are provided (see examples below).
mceTableProps Opens the Table Properties dialog.
mceTableRowProps Opens the table row properties dialog.
mceTableCellProps Opens the table cell properties dialog.
mceTableRowType Changes the current row or rows to the specified type, either: 'header', 'body', or 'footer'. The structure of header rows is dependent on the table_header_type option. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableColType Changes all cells in the current column or columns to the specified type, either: 'td' or 'th'. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableCellType Changes the current cell or cells to the specified type, either: 'td' or 'th'. > Note: This feature is only available for TinyMCE 5.4 and later.

Examples

tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'fixed');
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'relative');
tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'responsive');
tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': 'red', 'border-color': 'blue' });
tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': '' }); // removes the current background-color
tinymce.activeEditor.execCommand('mceTableSplitCells');
tinymce.activeEditor.execCommand('mceTableMergeCells');
tinymce.activeEditor.execCommand('mceTableInsertRowBefore');
tinymce.activeEditor.execCommand('mceTableInsertRowAfter');
tinymce.activeEditor.execCommand('mceTableInsertColBefore');
tinymce.activeEditor.execCommand('mceTableInsertColAfter');
tinymce.activeEditor.execCommand('mceTableDeleteCol');
tinymce.activeEditor.execCommand('mceTableDeleteRow');
tinymce.activeEditor.execCommand('mceTableCutRow');
tinymce.activeEditor.execCommand('mceTableCutCol');
tinymce.activeEditor.execCommand('mceTableCopyRow');
tinymce.activeEditor.execCommand('mceTableCopyCol');
tinymce.activeEditor.execCommand('mceTablePasteRowBefore');
tinymce.activeEditor.execCommand('mceTablePasteRowAfter');
tinymce.activeEditor.execCommand('mceTablePasteColBefore');
tinymce.activeEditor.execCommand('mceTablePasteColAfter');
tinymce.activeEditor.execCommand('mceTableDelete');
tinymce.activeEditor.execCommand('mceInsertTable');
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 2, columns: 2 });
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1 } });
tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1, headerColumns: 1 } });
tinymce.activeEditor.execCommand('mceTableProps');
tinymce.activeEditor.execCommand('mceTableRowProps');
tinymce.activeEditor.execCommand('mceTableCellProps');
tinymce.activeEditor.execCommand('mceTableRowType', false, { type: 'header' });
tinymce.activeEditor.execCommand('mceTableColType', false, { type: 'th' });
tinymce.activeEditor.execCommand('mceTableCellType', false, { type: 'th' });

Query command values

The following table-related values can be queried using the queryCommandValue API.

Value Description
mceTableRowType Returns the row type of the current table row, either: "header", "body", or "footer". > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableColType Returns the column type of the current table column, either: "td" or "th". > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableCellType Returns the cell type of the current table cell, either: "td" or "th". > Note: This feature is only available for TinyMCE 5.4 and later.

Examples

tinymce.activeEditor.queryCommandValue('mceTableCellType');
tinymce.activeEditor.queryCommandValue('mceTableRowType');
tinymce.activeEditor.queryCommandValue('mceTableColType');

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.