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 .

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%'

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>
      <td>&nbsp;</td>
      <th>&nbsp;</th>
  </thead>
  <tbody>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
  </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>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
  </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>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
  </thead>
  <tbody>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
  </tbody>
</table>
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_header_type: 'sectionCells'

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:

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.

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.

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

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  object_resizing: false
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  object_resizing: 'img'
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_default_attributes: {},
  table_default_styles: {}
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_sizing_mode: 'fixed'
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_sizing_mode: 'relative'