Table options

TinyMCE Table & Enhanced Tables plugins

TinyMCE has built-in table functionality. However, there are two plugins that provide additional functionality for tables:

  • Table is an open source plugin that provides improved table handling through UI components, including dialogs, context menus, context toolbars, menu items and toolbar buttons. For information, see the Table plugin.

  • Enhanced Tables is a premium plugin that extends the Table plugin by adding advanced functionality, including sort options for rows and columns, and row numbering column functionality for tables. For information, see the Enhanced Tables plugin.

The following options apply to the core table functionality and may also affect table plugin and advtable plugin functionality.

Controlling how tables are inserted

Existing tables and tables added using setContent, insertContent or paste are not affected by these options.

table_use_colgroups

This option adds colgroup and col elements to new tables for specifying column widths.

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

Type: Boolean

Default value: true

Possible values: true, false

Example: disable colgroup support using table_use_colgroups

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_use_colgroups: 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
  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
  table_default_styles: {
    width: '50%'
  }
});

Interacting with tables

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 strong, em, b, i, span, font, h1, h2, h3, h4, h5, h6, p and div elements into new cells.

Type: String

Example: using table_clone_elements

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_clone_elements: 'strong em a'
});

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
  table_tab_navigation: false
});

table_header_type

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
  table_header_type: 'sectionCells'
});

Controlling resizing of tables

table_sizing_mode

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
  table_sizing_mode: 'relative'
});

table_column_resizing

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
  table_column_resizing: 'resizetable'
});

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
  table_resize_bars: false
});

object_resizing

This options allows you to turn on/off the resizing handles on images, tables or media objects. This option is enabled by default and allows you to resize table and images. You can also specify a CSS3 selector of what you want to enable resizing on.

Disable all resizing of images/tables

Type: Boolean, String

Default value: true

Possible values: true, false, or a valid CSS selector

The default value for this option is different for mobile devices. For information on the default mobile option, see: TinyMCE Mobile — Configuration options with mobile defaults.
Example: disable object resizing
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  object_resizing: false
});

Enable resizing on images only

Type: Boolean, String

Default value: true

Possible values: true, false, img

Example: enable object resizing for images
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  object_resizing: 'img'
});

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
  table_default_attributes: {},
  table_default_styles: {}
});

Pixel based resizing

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

Percentage based resizing

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