Table plugin

The Table plugin adds table management functionality to TinyMCE, including dialogs, context menus, context toolbars, menu items, and toolbar buttons.

Basic setup

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

Options

For additional options that are provided by the core table functionality, see Table Options.

These options affect the execution of the table plugin.

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',
  toolbar: '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',
  toolbar: '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: using table_appearance_options

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

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.

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

The default value for this option is different for mobile devices. For information on the default mobile option, see: TinyMCE Mobile — Configuration options with mobile defaults.

Example: using table_grid

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

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: using table_class_list

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_class_list: [
    { title: 'None', value: '' },
    { title: 'No Borders', value: 'table_no_borders' },
    { title: 'Red borders', value: 'table_red_borders' },
    { title: 'Blue borders', value: 'table_blue_borders' },
    { title: 'Green borders', value: 'table_green_borders' }
  ]
});

Example of a nested list of table classes

To create a nested list, replace value with menu to add the top level of the list, then provide an array of items.

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_class_list: [
    { title: 'None', value: '' },
    { title: 'No Borders', value: 'table_no_borders' },
    { title: 'Borders',
      menu: [
        { title: 'Red borders', value: 'table_red_borders' },
        { title: 'Blue borders', value: 'table_blue_borders' },
        { title: 'Green borders', value: 'table_green_borders' }
      ]
    }
  ]
});

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: using table_cell_class_list

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_cell_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_cell_no_border' },
    { title: 'Red border', value: 'table_cell_red_border' },
    { title: 'Blue border', value: 'table_cell_blue_border' },
    { title: 'Green border', value: 'table_cell_green_border' }
  ]
});

Example of a nested list of table cell classes

To create a nested list, replace value with menu to add the top level of the list, then provide an array of items.

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_cell_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_cell_no_border' },
    { title: 'Border',
      menu: [
        { title: 'Red border', value: 'table_cell_red_border' },
        { title: 'Blue border', value: 'table_cell_blue_border' },
        { title: 'Green border', value: 'table_cell_green_border' }
      ]
    }
  ]
});

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: using table_row_class_list

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_row_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_row_no_border' },
    { title: 'Red border', value: 'table_row_red_border' },
    { title: 'Blue border', value: 'table_row_blue_border' },
    { title: 'Green border', value: 'table_row_green_border' }
  ]
});

Example of a nested list of table row classes

To create a nested list, replace value with menu to add the top level of the list, then provide an array of items.

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_row_class_list: [
    { title: 'None', value: '' },
    { title: 'No Border', value: 'table_row_no_border' },
    { title: 'Border',
      menu: [
        { title: 'Red border', value: 'table_row_red_border' },
        { title: 'Blue border', value: 'table_row_blue_border' },
        { title: 'Green border', value: 'table_row_green_border' }
      ]
    }
  ]
});

table_border_widths

This option is used to specify a list of pre-defined cell border widths for quick access on the tablecellborderwidth toolbar button or menu item. This option accepts any valid CSS numeric value.

Type: Array

Default value:

[
  { title: '1px', value: '1px' },
  { title: '2px', value: '2px' },
  { title: '3px', value: '3px' },
  { title: '4px', value: '4px' },
  { title: '5px', value: '5px' }
]

Example: using table_border_widths

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_border_widths: [
    { title: 'small', value: '1px' },
    { title: 'medium', value: '3px' },
    { title: 'large', value: '5px' },
  ]
});

table_border_styles

This option is used to specify a list of pre-defined cell border widths for quick access on the tablecellborderstyle toolbar button or menu item, in addition to the dialog options. This option accepts any valid CSS border style.

Type: Array

Default value:

[
  { title: 'Solid', value: 'solid' },
  { title: 'Dotted', value: 'dotted' },
  { title: 'Dashed', value: 'dashed' },
  { title: 'Double', value: 'double' },
  { title: 'Groove', value: 'groove' },
  { title: 'Ridge', value: 'ridge' },
  { title: 'Inset', value: 'inset' },
  { title: 'Outset', value: 'outset' },
  { title: 'None', value: 'none' },
  { title: 'Hidden', value: 'hidden' }
]

Example: using table_border_styles

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_border_styles: [
    { title: 'Solid', value: 'solid' },
    { title: 'Dotted', value: 'dotted' },
    { title: 'Dashed', value: 'dashed' }
  ]
});

table_background_color_map

This option is used to specify the default values for the table cell background color picker, which can be opened with the tablecellbackgroundcolor toolbar button or menu item. If no values are defined, the toolbar button and menu item will use the values or default values of the color_map option. This option does not modify the background color picker in the table dialogs. This option accepts Hex, RGB and HSL color values.

The custom color picker is not available for the tablecellbackgroundcolor toolbar button or menu item.

Type: Array

Default value: See color_map option

Example: using table_background_color_map

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_background_color_map: [
    { title: 'Red', value: 'FF0000' },
    { title: 'White', value: 'FFFFFF' },
    { title: 'Yellow', value: 'F1C40F' }
  ]
});

table_border_color_map

This option is used to specify the default values for the table cell border color picker, which can be opened with the tablecellbordercolor toolbar button or menu item. If no values are defined, the toolbar button and menu item will use the values or default values of the color_map option. This option does not modify the border color picker in the table dialogs. This option accepts Hex, RGB and HSL color values.

The custom color picker is not available for the tablecellbordercolor toolbar button or menu item.

Type: Array

Default value: See color_map option

Example: using table_border_color_map

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_border_color_map: [
    { title: 'Red', value: 'FF0000' },
    { title: 'White', value: 'FFFFFF' },
    { title: 'Yellow', value: 'F1C40F' }
  ]
});

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: using table_advtab

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: '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: using table_cell_advtab

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: '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: using table_row_advtab

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_row_advtab: 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, 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. By setting this to false, these are added as attributes to the table element.

Type: Boolean

Default value: true

Possible values: true, false

Example: using table_style_by_css

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  toolbar: 'table',
  table_style_by_css: false
});
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.

table_merge_content_on_paste

This feature is only available for TinyMCE 6.5 and later.

This option sets the behavior of the editor when a table is pasted into another table.

(If the insertion point is within a table or the current selection includes any part of a table, paste events happens into the table.)

When set to true, pasting a table into another table replaces the extant table with the pasted table. It merges the pasted table into the extant table, replacing the extant table in the process.

When set to false, pasting a table into another table creates a new table within the selected cell of the extant table.

The specific behavior, when this option is set to false, depends on the nature of the current selection.

  1. If there is no selection (ie the insertion point is within a cell), pasting a table in

    • pastes the table at the insertion point;

    • places material in the cell before the insertion point above the pasted-in table; and

    • places material in the cell after the insertion point below the pasted-in table.

  2. If the selection is the complete contents of a cell, pasting a table in

    • replaces those contents; and

    • puts the pasted-in table into the, now otherwise empty, table cell.

  3. If the selection is the complete contents of more than one cell, pasting a table in

    • replaces those contents;

    • puts the pasted-in table into the first selected cell; and

    • removes the other selected cells from the extant table.

  4. If the selection is the complete contents of more than one cell and the partial contents of a final cell, pasting a table in

    • replaces the contents of the completely selected cells;

    • places the pasted-in table in the first selected cell;

    • removes the other completely selected cells; and

    • leaves the partially selected cell unchanged.

This option is set to true by default.

Type: Boolean

Default value: true

Possible values: true, false

Example: using table_merge_content_on_paste

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

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.

tablecutrow

Cuts the current row to the clipboard.

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.

tablepasterowbefore

Pastes the row in the clipboard before the current row.

tableprops

Opens the table properties dialog.

tablerowprops

Opens the Row properties dialog.

tablesplitcells

Splits the current merged cell.

tableclass

Adds or removes pre-defined classes to the selected table.

tablecellclass

Adds or removes pre-defined classes to selected cells in the table.

tablecellvalign

Sets the vertical alignment of the selected cells.

tablecellborderwidth

Sets the border width of all selected cells.

tablecellborderstyle

Sets the style of border for all selected cells.

tablecaption

Toggles the caption on the selected table.

tablecellbackgroundcolor

Sets the background color of the selected cells.

tablecellbordercolor

Sets the border color of the selected cells.

tablerowheader

Toggle a row between being a table header row or a table body row.

tablecolheader

Toggle a column between being a table header column and a table body column.

These toolbar buttons can be added to the editor using:

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.

tablesplitcells

Table

Splits merged cells.

tablecellprops

Table

Opens the cell properties dialog.

column

Table

Column menu item with related controls.

tableinsertcolumnbefore

Table

Insert column before the currently selected column.

tableinsertcolumnafter

Table

Insert column after the currently selected column.

tablecutcolumn

Table

Cut the currently selected column or columns.

tablecopycolumn

Table

Copy the currently selected column or columns.

tablepastecolumnbefore

Table

Paste column before the currently selected column.

tablepastecolumnafter

Table

Paste column after the currently selected column.

tabledeletecolumn

Table

Deletes the currently selected column or columns.

row

Table

Row menu item with related controls.

tableinsertrowbefore

Table

Inserts row before the currently selected row.

tableinsertrowafter

Table

Inserts row after the currently selected row.

tablecutrow

Table

Cut the currently selected row or rows.

tablecopyrow

Table

Copy the currently selected row or rows.

tablepasterowbefore

Table

Paste row before the currently selected row.

tablepasterowafter

Table

Paste row after the currently selected row.

tablerowprops

Table

Opens the row properties dialog.

tabledeleterow

Table

Deletes the currently selected row or rows.

tableclass

Not Applicable

Adds or removes pre-defined classes to the selected table.

tablecellclass

Not Applicable

Adds or removes pre-defined classes to selected cells in the table.

tablecellvalign

Not Applicable

Sets the vertical alignment of the selected cells.

tablecellborderwidth

Not Applicable

Sets the border width of the selected cells.

tablecellborderstyle

Not Applicable

Sets the style of the border for all selected cells.

tablecaption

Not Applicable

Toggles the caption on the selected table.

tablecellbackgroundcolor

Not Applicable

Sets the background color of the selected cells.

tablecellbordercolor

Not Applicable

Sets the border color of the selected cells.

tablerowheader

Not Applicable

Toggle a row between being a table header row or a table body row.

tablecolheader

Not Applicable

Toggle a column between being a table header column and a table body column.

These menu items can be added to the editor using:

Commands

For additional commands that are provided by the core table functionality, see Core Table Commands.

The Table plugin provides the following TinyMCE commands.

Command Description

mceInsertTableDialog

Opens the insert/edit table dialog.

mceTableProps

Opens the Table Properties dialog.

mceTableRowProps

Opens the table row properties dialog.

mceTableCellProps

Opens the table cell properties dialog.
Examples
tinymce.activeEditor.execCommand('mceInsertTableDialog');
tinymce.activeEditor.execCommand('mceTableProps');
tinymce.activeEditor.execCommand('mceTableRowProps');
tinymce.activeEditor.execCommand('mceTableCellProps');