---
title: "Table plugin"
description: "Table editing features."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/table/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/table/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 6183
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/table/).
# 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

```js
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](../available-toolbar-buttons/).

#### Example: Default table_toolbar configuration

```js
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.

```js
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`

```js
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`

```js
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`

```js
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`](../editor-appearance/#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](../tinymce-for-mobile/#mobiledefaultsforselectedsettings).

#### Example: Using `table_grid`

```js
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`

```js
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`

```js
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`

```js
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`](#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`

```js
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`

```js
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`

```js
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`

```js
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:

```js
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`

```js
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:

```js
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`

```js
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:

```js
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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#numeric_data_types).

**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`

```js
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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values).

**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`

```js
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](../content-appearance/#color_map). 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](../content-appearance/#custom_colors) is not available for the `tablecellbackgroundcolor` toolbar button or menu item.

**Type:** `Array`

**Default Value:** See [`color_map` option](../content-appearance/#color_map)

#### Example: Using `table_background_color_map`

```js
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](../content-appearance/#color_map). 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](../content-appearance/#custom_colors) is not available for the `tablecellbordercolor` toolbar button or menu item.

**Type:** `Array`

**Default Value:** See [`color_map` option](../content-appearance/#color_map)

#### Example: Using `table_border_color_map`

```js
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`

```js
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`

```js
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`

```js
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`

```js
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 cell padding. 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`

```js
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:

```html
<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:

```html
<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:

```html
<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`

```js
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

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'table',
  table_default_attributes: {},
  table_default_styles: {}
});
```

### Pixel based resizing

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

### Percentage based resizing

```js
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](../content-appearance/#textcoloroptions).