Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

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.

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:

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.
tableclass Adds or removes pre-defined classes to the selected table. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellclass Adds or removes pre-defined classes to selected cells in the table. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellvalign Sets the vertical alignment of the selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellborderwidth Sets the border width of all selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellborderstyle Sets the style of border for all selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecaption Toggles the caption on the selected table. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellbackgroundcolor Sets the background color of the selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellbordercolor Sets the border color of the selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablerowheader Toggle a row between being a table header row or a table body row. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecolheader Toggle a column between being a table header column and a table body column. > Note: This feature is only available for TinyMCE 5.9 and later.

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.
tablecutcolumn Table Cut the currently selected column or columns > Note: This feature is only available for TinyMCE 5.5 and later.
tablecopycolumn Table Copy the currently selected column or columns > Note: This feature is only available for TinyMCE 5.5 and later.
tablepastecolumnbefore Table Paste column before the currently selected column > Note: This feature is only available for TinyMCE 5.5 and later.
tablepastecolumnafter Table Paste column after the currently selected column > Note: This feature is only available for TinyMCE 5.5 and later.
tabledeletecolumn Table Deletes the currently 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 the currently selected row or rows > Note: This feature is only available for TinyMCE 5.4 and later.
tablecopyrow Table Copy the currently 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 after the 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 the currently selected row or rows > Note: This feature is only available for TinyMCE 5.4 and later.
tableclass Not Applicable Adds or removes pre-defined classes to the selected table. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellclass Not Applicable Adds or removes pre-defined classes to selected cells in the table. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellvalign Not Applicable Sets the vertical alignment of the selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellborderwidth Not Applicable Sets the border width of the selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellborderstyle Not Applicable Sets the style of the border for all selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecaption Not Applicable Toggles the caption on the selected table. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellbackgroundcolor Not Applicable Sets the background color of the selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecellbordercolor Not Applicable Sets the border color of the selected cells. > Note: This feature is only available for TinyMCE 5.9 and later.
tablerowheader Not Applicable Toggle a row between being a table header row or a table body row. > Note: This feature is only available for TinyMCE 5.9 and later.
tablecolheader Not Applicable Toggle a column between being a table header column and a table body column. > Note: This feature is only available for TinyMCE 5.9 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: Using table plugin APIs

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

Events

The following events are provided by the Table plugin.

Name Data Description
newrow N/A Fired when a row is created
newcell N/A Fired when a cell is created
ObjectResizeStart N/A Fired when a resize action is started on a table, row, column or cell using the resize bars
ObjectResized N/A Fired when a resize action is finished on a table, row, column or cell using the resize bars
TableModified { table: HTMLTableElement, structure: boolean, style: boolean } Fired when style or structural changes are made to a table.
> Note: This feature is only available for TinyMCE 5.7 and later.
TableSelectionClear N/A Fired when the table selection is cleared.
> Note: This feature is only available for TinyMCE 5.1 and later.

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.
mceTableCellToggleClass Adds a class to all selected cells that do not have it, or removes the class if all of them have it. > Note: This feature is only available for TinyMCE 5.9 and later.
mceTableToggleClass Adds a class to the selected table, or removes the class if it already exists. > Note: This feature is only available for TinyMCE 5.9 and later.
mceTableToggleCaption Adds a caption to the selected table, or removes the caption if it already exists. > Note: This feature is only available for TinyMCE 5.9 and later..
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('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.

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.