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
totrue
and configuremenu
to include both theinserttable
andinserttabledialog
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 aresponsive
table is resized, it will be converted to arelative
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 thethead
element. The cell types (td
and/orth
) are unaffected.For example:
<table> <thead> <tr> <td> </td> <th> </th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> </tr> </tbody> </table>
-
cells
- When a table row is set as a header row, the row (tr
) moves to thetbody
element (if in athead
element). All table data cell elements (td
) in the row are changed to table header cell elements (th
).For example:
<table> <tbody> <tr> <th> </th> <th> </th> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>
-
sectionCells
- When a table row is set as a header row, the row (tr
) is moved to thethead
element. All cells in the row are changed to table header cell elements (th
).For example:
<table> <thead> <tr> <th> </th> <th> </th> </tr> </thead> <tbody> <tr> <td> </td> <td> </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, thesection
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:
- The
toolbar
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
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:
- The
menu
configuration option. - The
contextmenu
configuration option. - Custom Menu toolbar buttons.
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');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.