---
title: "Table options"
description: "TinyMCE tables"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/table-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/table-options/index.md"
version: "latest"
last_updated: "2026-09-28T00:27:52Z"
tokens: 2526
---
# 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](../table/).
- Enhanced Tables is a premium plugin that extends the [Table plugin](../table/) 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](../advtable/).

> **Important:** The following options apply to the core table functionality and may also affect `table` plugin and `advtable` plugin functionality.

## Controlling how tables are inserted

> **Note:** Existing tables and tables added using [`setContent`](../apis/tinymce.editor/#setContent), [`insertContent`](../apis/tinymce.editor/#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`

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

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

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

### `table_default_header_rows`

The `table_default_header_rows` option sets the number of default header rows for new tables created through the editor UI (for example, via the table picker or insert table dialog). This helps integrators meet accessibility standards by ensuring new tables have header rows by default without manual intervention.

**Type:** `Number`

**Default value:** `0`

#### Example: using `table_default_header_rows`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_default_header_rows: 1
});
```

### `table_default_header_cols`

The `table_default_header_cols` option sets the number of default header columns for new tables created through the editor UI (for example, via the table picker or insert table dialog). This helps integrators meet accessibility standards by ensuring new tables have header columns by default without manual intervention.

**Type:** `Number`

**Default value:** `0`

#### Example: using `table_default_header_cols`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  table_default_header_cols: 1
});
```

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

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

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

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

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

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

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

> **Note:** 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](../tinymce-for-mobile/#mobile-defaults-for-selected-options).

##### Example: disable object resizing

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

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

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

### Pixel based resizing

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

### Percentage based resizing

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