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({
  plugins: "table",
  menubar: "table",
  toolbar: "table"
});

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 buttons and the order that they will appear on within TinyMCE's inline contextual toolbar for tables. To specify the controls that should appear on TinyMCE's table toolbar, the table_toolbar option should be provided with a space separated list of toolbar controls. To create groups within this list, please add | pipe characters between the groups of controls that you would like to create. If you want to disable this toolbar simply set the value to an empty string.

Type: String

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

Example
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  table_toolbar: "tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol"
});

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
  table_clone_elements: "strong em a"
});

table_grid

This option allows you disable the table grid feature of 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 you set this option to false the dragable matrix will be replaced with a table dialog box into which a user can enter various parameters to create a table cols, rows, width, height, cell spacing, cell padding, border, caption and alignment). There are also advanced style options available in the dialog.

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_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-collapsed': '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

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_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: String

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: String

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: String

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
});

Examples of various table setups

Here are some examples of configuration for common setups.

No default attributes or styles on tables
tinymce.init({
  plugins: "table",
  table_default_attributes: {},
  table_default_styles: {}
});
Pixel based resizing
tinymce.init({
  plugins: "table",
  table_default_attributes: {},
  table_default_styles: {},
  table_responsive_width: false
});
Percentage based resizing
tinymce.init({
  plugins: "table",
  table_default_attributes: {
    'border': '1'
  },
  table_default_styles: {
    'border-collapsed': 'collapse',
    'width': '100%'
  },
  table_responsive_width: true
});

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.