Table plugin

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.

Basic setup

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: Using table_appearance_options

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

table_use_colgroups

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

This option adds colgroup and col elements to new tables for specifying column widths. Existing tables and tables added using setContent or paste are not affected.

TinyMCE only supports the width attribute on col elements. Other attributes are not supported, such as the span attribute.

Type: Boolean

Default Value: false

Possible Values: true, false

Example: Enabling colgroup support using table_use_colgroups

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

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: Using table_clone_elements

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: Using table_grid

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: Using table_tab_navigation

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: Using table_default_attributes

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: Using table_default_styles

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 will be removed in TinyMCE 6.0.

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

Example: Using table_responsive_width

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: Using table_sizing_mode

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

table_column_resizing

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

The table_column_resizing option sets whether a table or other columns are resized when a user resizes, inserts, or deletes a table column.

There are two settings:

• preservetable: The table width is maintained when manipulating table columns by changing the size of nearby columns.
• resizetable: The table width is changed when manipulating table columns and the size of other columns is maintained.

Type: String

Default Value: 'preservetable'

Possible values: 'preservetable', 'resizetable'

Example: Using table_column_resizing

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

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',
  menubar: '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

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

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',
  menubar: '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',
  menubar: '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

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

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',
  menubar: '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',
  menubar: '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

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

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',
  menubar: '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

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

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',
  menubar: 'table',
  toolbar: 'table',
  table_border_widths: [
    {title: 'small', value: '1px'},
    {title: 'medium', value: '3px'},
    {title: 'large', value: '5px'},
  ]
});

table_border_styles

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

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',
  menubar: 'table',
  toolbar: 'table',
  table_border_styles: [
    {title: 'Solid', value: 'solid'},
    {title: 'Dotted', value: 'dotted'},
    {title: 'Dashed', value: 'dashed'}
  ]
});

table_background_color_map

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

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',
  menubar: 'table',
  toolbar: 'table',
  table_background_color_map: [
    {title: 'Red', value: 'FF0000'},
    {title: 'White', value: 'FFFFFF'},
    {title: 'Yellow', value: 'F1C40F'}
  ]
});

table_border_color_map

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

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',
  menubar: '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',
  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: Using table_cell_advtab

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: Using table_row_advtab

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: Using table_resize_bars

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: Using table_style_by_css

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: Using table_header_type

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_sizing_mode: 'fixed'
});

Percentage based resizing

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

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:

These toolbar buttons can be added to the editor using:

• The toolbar configuration option.
• The quickbars_insert_toolbar configuration option.
• Custom Context toolbars.

Menu items

The Table plugin provides the following menu items:

These menu items can be added to the editor using:

• The menu configuration option.
• The contextmenu configuration option.
• Custom Menu toolbar buttons.

API

Example: Using table plugin APIs

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

Events

The following events are provided by the Table plugin.

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.

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('mceTableToggleClass', false, 'myclass');
tinymce.activeEditor.execCommand('mceTableCellToggleClass', false, 'mycellclass');
tinymce.activeEditor.execCommand('mceTableToggleCaption');
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.

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.