# Installation

After [installing the editor](../../getting-started/installation/cloud/quick-start.md), add the `Table` plugin to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Table, TableToolbar } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Table, TableToolbar, Bold, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Table, TableToolbar } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Table, TableToolbar, Bold, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="table-contextual-toolbar">

### Table contextual toolbar

Easily control your tables employing a dedicated toolbar.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		table: {
			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="default-table-headers">

### Default table headers

To make every inserted table have `n` number of rows and columns as table headers by default, set an optional table configuration property `defaultHeadings` as follows:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		table: {
			defaultHeadings: { rows: 1, columns: 1 }
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

Check the table with default headers applied to both the first row and the first column in the demo below. Click on the table and use the column properties or the row properties UI button to toggle the respective headers.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="enable-table-footers">

### Enable table footers

To enable table footers, set the optional table configuration property `enableFooters` as follows:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		table: {
			enableFooters: true
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

The option also enables UI for table footers. You can set a footer row similarly to the header row by using the switch button in the table toolbar.

<a id="disallow-nesting-tables">

### Disallow nesting tables

By default, the editor allows nesting a table inside another table’s cell.

To disallow nesting tables, you need to register an additional schema rule. It needs to be added before the data is loaded into the editor. Due to that, it is best to implement it as a plugin:

```js
function DisallowNestingTables( editor ) {
	editor.model.schema.addChildCheck( ( context, childDefinition ) => {
		if ( childDefinition.name == 'table' && Array.from( context.getNames() ).includes( 'table' ) ) {
			return false;
		}
	} );
}

// Pass it via config.extraPlugins or config.plugins:

ClassicEditor
	.create( {
		// ... Other configuration options ...
		extraPlugins: [ DisallowNestingTables ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> Check the [step-by-step tutorial](../../framework/tutorials/crash-course/editor.md) if you need more information about the technical side of this solution.

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor, such as internal data structures, selection, commands, and much more.

<a id="common-api">

## Common API

<a id="ui-components">

### UI components

The [`Table`](../../api/module_table_table-Table.md) plugins register the following UI components:

| [Component](../../getting-started/setup/toolbar.md) name | Registered by                                    |
| -------------------------------------------------------- | ------------------------------------------------ |
| The `'insertTable'` dropdown                             | [`Table`](../../api/module_table_table-Table.md) |
| The `'tableColumn'` dropdown                             |                                                  |
| The `'tableRow'` dropdown                                |                                                  |
| The `'mergeTableCells'` split button                     |                                                  |

<a id="toolbars">

#### Toolbars

The [`TableToolbar`](../../api/module_table_tabletoolbar-TableToolbar.md) plugin introduces two balloon toolbars for tables.

* The content toolbar shows up when a table cell is selected and it is anchored to the table. It is possible to [configure](../../api/module_table_tableconfig-TableConfig.md#member-contentToolbar) its content. Normally, the toolbar contains the table-related tools such as `'tableColumn'` and `'tableRow'` dropdowns and `'mergeTableCells'` split button.
* The table toolbar shows up when the whole table is selected, for instance using the widget handler. It is possible to [configure](../../api/module_table_tableconfig-TableConfig.md#member-tableToolbar) its content.

<a id="editor-commands">

### Editor commands

| [Command](../../framework/architecture/core-editor-architecture.md#commands) name | Command class                                                                                                | Belongs to (top–level plugin)                    |
| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ |
| `'insertTable'`                                                                   | [`InsertTableCommand`](../../api/module_table_commands_inserttablecommand-InsertTableCommand.md)             | [`Table`](../../api/module_table_table-Table.md) |
| `'insertTableColumnLeft'`                                                         | [`InsertColumnCommand`](../../api/module_table_commands_insertcolumncommand-InsertColumnCommand.md)          |                                                  |
| `'insertTableColumnRight'`                                                        | [`InsertColumnCommand`](../../api/module_table_commands_insertcolumncommand-InsertColumnCommand.md)          |                                                  |
| `'insertTableRowAbove'`                                                           | [`InsertRowCommand`](../../api/module_table_commands_insertrowcommand-InsertRowCommand.md)                   |                                                  |
| `'insertTableRowBelow'`                                                           | [`InsertRowCommand`](../../api/module_table_commands_insertrowcommand-InsertRowCommand.md)                   |                                                  |
| `'removeTableColumn'`                                                             | [`RemoveColumnCommand`](../../api/module_table_commands_removecolumncommand-RemoveColumnCommand.md)          |                                                  |
| `'removeTableRow'`                                                                | [`RemoveRowCommand`](../../api/module_table_commands_removerowcommand-RemoveRowCommand.md)                   |                                                  |
| `'selectTableColumn'`                                                             | [`SelectColumnCommand`](../../api/module_table_commands_selectcolumncommand-SelectColumnCommand.md)          |                                                  |
| `'selectTableRow'`                                                                | [`SelectRowCommand`](../../api/module_table_commands_selectrowcommand-SelectRowCommand.md)                   |                                                  |
| `'setTableColumnHeader'`                                                          | [`SetHeaderColumnCommand`](../../api/module_table_commands_setheadercolumncommand-SetHeaderColumnCommand.md) |                                                  |
| `'setTableRowHeader'`                                                             | [`SetHeaderRowCommand`](../../api/module_table_commands_setheaderrowcommand-SetHeaderRowCommand.md)          |                                                  |
| `'mergeTableCellRight'`                                                           | [`MergeCellCommand`](../../api/module_table_commands_mergecellcommand-MergeCellCommand.md)                   |                                                  |
| `'mergeTableCellLeft'`                                                            | [`MergeCellCommand`](../../api/module_table_commands_mergecellcommand-MergeCellCommand.md)                   |                                                  |
| `'mergeTableCellUp'`                                                              | [`MergeCellCommand`](../../api/module_table_commands_mergecellcommand-MergeCellCommand.md)                   |                                                  |
| `'mergeTableCellDown'`                                                            | [`MergeCellCommand`](../../api/module_table_commands_mergecellcommand-MergeCellCommand.md)                   |                                                  |
| `'splitTableCellVertically'`                                                      | [`SplitCellCommand`](../../api/module_table_commands_splitcellcommand-SplitCellCommand.md)                   |                                                  |
| `'splitTableCellHorizontally'`                                                    | [`SplitCellCommand`](../../api/module_table_commands_splitcellcommand-SplitCellCommand.md)                   |                                                  |

<a id="table-alignment-in-output">

### Table alignment in output

Table alignment in the editor’s output uses CSS classes by default. But, you can control it with the `table.tableProperties.alignment.useInlineStyles` property.

* When the property is `false` (default), output contains CSS classes.
* When the property is `true`, output contains inline styles.

The option applies to all five alignment options. Learn more about them in the [Table alignment](tables.md#table-alignment) section.

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor, such as internal data structures, selection, commands, and much more.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)