---
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/6/table-options/index.md"
version: "6"
last_updated: "2022-11-30T01:26:11Z"
tokens: 2325
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/table-options/).
# Table options

## TinyMCE Table & Advanced 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/).
- Advanced 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 [Advanced 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%'
  }
});
```

## 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'
});
```