# Table and cell styling tools

<!-- 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. -->

CKEditor 5 comes with some additional tools that help you change the look of tables and table cells. You can control border color and style, background color, padding, or text alignment.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Put the caret anywhere inside the table to open the table toolbar. Click the table properties button in the toolbar. A pop–up will open with options to shape the look of the entire table. The cell properties button gives you access to styling options for individual table cells.

[Learn more](#configuring-styling-tools) about configuring color palettes in the table styling pop–up interfaces.

<!-- 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. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

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

**NPM**

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

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			contentToolbar: [
				'tableColumn', 'tableRow', 'mergeTableCells',
				'tableProperties', 'tableCellProperties'
			],

			tableProperties: {
				// The configuration of the TableProperties plugin.
			},

			tableCellProperties: {
				// The configuration of the TableCellProperties plugin.
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

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

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Table, TableToolbar, TableProperties, TableCellProperties, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			contentToolbar: [
				'tableColumn', 'tableRow', 'mergeTableCells',
				'tableProperties', 'tableCellProperties'
			],

			tableProperties: {
				// The configuration of the TableProperties plugin.
			},

			tableCellProperties: {
				// The configuration of the TableCellProperties plugin.
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-styling-tools">

## Configuring styling tools

Table and cell styling tools let you create tables with colorful backgrounds and borders. These colors can be picked using color palettes in the table properties and cell properties pop-ups. To help users choose the right colors for the content, you can pre-configure such color palettes, like in the editor below:

<!-- 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. -->

With the selection inside any table cell, use the table properties and cell properties buttons in the toolbar to check available styling and color options.

<a id="customizing-color-palettes">

### Customizing color palettes

You can use these specific configuration options to define customized color palettes for background and border colors to match your document:

* [`tableProperties.borderColors`](../../api/module_table_tableconfig-TableConfig.md#member-tableProperties) – Defines the color palette for table borders.
* [`tableProperties.backgroundColors`](../../api/module_table_tableconfig-TableConfig.md#member-tableProperties) – Defines the color palette for table background.
* [`tableCellProperties.borderColors`](../../api/module_table_tableconfig-TableConfig.md#member-tableCellProperties) – Defines the color palette for cell borders.
* [`tableCellProperties.backgroundColors`](../../api/module_table_tableconfig-TableConfig.md#member-tableCellProperties) – Defines the color palette for cell background.

> **Note**
>
> These configuration options **do not** impact the [data loaded into the editor](../../getting-started/setup/getting-and-setting-data.md#replacing-the-editor-data-with-setdata). This means that they do not limit or filter the colors in the data. They are used only in the user interface allowing users to pick colors in a more convenient way.

For instance, to define the same color palette for all border and background configurations, use the following code snippet:

```js
const customColorPalette = [
	{
		color: 'hsl(4, 90%, 58%)',
		label: 'Red'
	},
	{
		color: 'hsl(340, 82%, 52%)',
		label: 'Pink'
	},
	{
		color: 'hsl(291, 64%, 42%)',
		label: 'Purple'
	},
	{
		color: 'hsl(262, 52%, 47%)',
		label: 'Deep Purple'
	},
	{
		color: 'hsl(231, 48%, 48%)',
		label: 'Indigo'
	},
	{
		color: 'hsl(207, 90%, 54%)',
		label: 'Blue'
	},

	// More colors.
	// ...
];

ClassicEditor
	.create( {
		// ... Other configuration options ...
		table: {
			contentToolbar: [
				'tableColumn', 'tableRow', 'mergeTableCells',
				'tableProperties', 'tableCellProperties'
			],

			// Set the palettes for tables.
			tableProperties: {
				borderColors: customColorPalette,
				backgroundColors: customColorPalette
			},

			// Set the palettes for table cells.
			tableCellProperties: {
				borderColors: customColorPalette,
				backgroundColors: customColorPalette
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="default-table-and-table-cell-styles">

### Default table and table cell styles

The table styles feature allows for configuring the default look of the tables in the editor. The configuration object should be synchronized with the [editor content styles](../../getting-started/setup/css.md).

The **“Table properties”** and **“Table cell properties”** buttons in the toolbar will show the table and table cell properties applied to the table or table cells.

The style sheet for the editor displayed below looks as follows:

```css
.ck-content figure.table:not(.layout-table) {
	float: left;
	width: 550px;
	height: 450px;
}

.ck-content figure.table:not(.layout-table) > table {
	border-style: dashed;
	border-color: hsl(90, 75%, 60%);
	border-width: 3px;
}

.ck-content figure.table:not(.layout-table) > table  > tbody > tr > td,
.ck-content figure.table:not(.layout-table) > table  > tbody > tr > th,
.ck-content figure.table:not(.layout-table) > table  > thead > tr > td,
.ck-content figure.table:not(.layout-table) > table  > thead > tr > th {
	text-align: center;
	vertical-align: bottom;
	padding: 10px
}
```

You must pass the same values to the editor configuration as:

* The [`table.tableProperties.defaultProperties`](../../api/module_table_tableconfig-TablePropertiesOptions.md) object for the table properties.
* The [`table.tableCellProperties.defaultProperties`](../../api/module_table_tableconfig-TableCellPropertiesOptions.md) object for the table cell properties.

```js
const tableConfig = {
	table: {
		tableProperties: {
			// The default styles for tables in the editor.
			// They should be synchronized with the content styles.
			defaultProperties: {
				borderStyle: 'dashed',
				borderColor: 'hsl(90, 75%, 60%)',
				borderWidth: '3px',
				alignment: 'left',
				width: '550px',
				height: '450px'
			},
		},
		// The default styles for table cells in the editor.
		// They should be synchronized with the content styles.
		tableCellProperties: {
			defaultProperties: {
				horizontalAlignment: 'center',
				verticalAlignment: 'bottom',
				padding: '10px'
			}
		}
	}
};
```

You should align the table element to the `left` side by default. Its size should be `550x450px`. The border style should be `dashed`, `3px` of its width, and the color specified as `Light green`.

The content should be away about `10px` from the cell’s edges (`padding`), vertically aligned to `bottom` and horizontally to `center`.

The same will be applied to new tables and cells if they are inserted into the editor.

<!-- 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. -->

Read more about all supported properties for the [table](../../api/module_table_tableconfig-TablePropertiesOptions.md) and [table cell](../../api/module_table_tableconfig-TableCellPropertiesOptions.md) features in their API documentation.

> **Note**
>
> The default table and table cell styles **do** impact the [data loaded into the editor](../../getting-started/setup/getting-and-setting-data.md#replacing-the-editor-data-with-setdata). Default properties will not be kept in the editor model.

<a id="helper-lines-when-border-style-is-set-to-none">

### Helper lines when border style is set to none

By default, when a table or table cell has an inline style such as `border: none` or `border-style: none`, the editor displays a dashed helper line to visually indicate the hidden border. This visualization is applied only in the editing view and does not affect the output HTML or the data stored by CKEditor 5.

The effect looks as follows:

If you prefer a true WYSIWYG experience or already implement your own border visualization logic, this behavior can be disabled using the [`table.showHiddenBorders`](../../api/module_table_tableconfig-TableConfig.md#member-showHiddenBorders) configuration option.

```js
const tableConfig = {
	table: {
		showHiddenBorders: false
	}
};
```

When disabled, tables and cells with `border: none` will remain completely borderless in the editing view, matching their rendered output.

<a id="common-api">

## Common API

<a id="ui-components">

### UI components

The [`TableProperties`](../../api/module_table_tableproperties-TableProperties.md) and [`TableCellProperties`](../../api/module_table_tablecellproperties-TableCellProperties.md) plugins register the following UI components:

| [Component](../../getting-started/setup/toolbar.md) name | Registered by                                                                              |
| -------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| The `'tableProperties'` button                           | [`TableProperties`](../../api/module_table_tableproperties-TableProperties.md)             |
| The `'tableCellProperties'` button                       | [`TableCellProperties`](../../api/module_table_tablecellproperties-TableCellProperties.md) |

<a id="toolbars">

#### Toolbars

The [`TableProperties`](../../api/module_table_tableproperties-TableProperties.md) and [`TableCellProperties`](../../api/module_table_tablecellproperties-TableCellProperties.md) plugins allow adding the `tableProperties` and `tableCellProperties` items to the toolbar. You can [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)                                                              |
| --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `'tableBorderColor'`                                                              | [`TableBorderColorCommand`](../../api/module_table_tableproperties_commands_tablebordercolorcommand-TableBorderColorCommand.md)                                         | [`TableProperties`](../../api/module_table_tableproperties-TableProperties.md)             |
| `'tableBorderStyle'`                                                              | [`TableBorderStyleCommand`](../../api/module_table_tableproperties_commands_tableborderstylecommand-TableBorderStyleCommand.md)                                         |                                                                                            |
| `'tableBorderWidth'`                                                              | [`TableBorderWidthCommand`](../../api/module_table_tableproperties_commands_tableborderwidthcommand-TableBorderWidthCommand.md)                                         |                                                                                            |
| `'tableAlignment'`                                                                | [`TableAlignmentCommand`](../../api/module_table_tableproperties_commands_tablealignmentcommand-TableAlignmentCommand.md)                                               |                                                                                            |
| `'tableWidth'`                                                                    | [`TableWidthCommand`](../../api/module_table_tableproperties_commands_tablewidthcommand-TableWidthCommand.md)                                                           |                                                                                            |
| `'tableHeight'`                                                                   | [`TableHeightCommand`](../../api/module_table_tableproperties_commands_tableheightcommand-TableHeightCommand.md)                                                        |                                                                                            |
| `'tableBackgroundColor'`                                                          | [`TableBackgroundColorCommand`](../../api/module_table_tableproperties_commands_tablebackgroundcolorcommand-TableBackgroundColorCommand.md)                             |                                                                                            |
| `'tableCellBorderStyle'`                                                          | [`TableCellBorderStyleCommand`](../../api/module_table_tablecellproperties_commands_tablecellborderstylecommand-TableCellBorderStyleCommand.md)                         | [`TableCellProperties`](../../api/module_table_tablecellproperties-TableCellProperties.md) |
| `'tableCellBorderColor'`                                                          | [`TableCellBorderColorCommand`](../../api/module_table_tablecellproperties_commands_tablecellbordercolorcommand-TableCellBorderColorCommand.md)                         |                                                                                            |
| `'tableCellBorderWidth'`                                                          | [`TableCellBorderWidthCommand`](../../api/module_table_tablecellproperties_commands_tablecellborderwidthcommand-TableCellBorderWidthCommand.md)                         |                                                                                            |
| `'tableCellHorizontalAlignment'`                                                  | [`TableCellHorizontalAlignmentCommand`](../../api/module_table_tablecellproperties_commands_tablecellhorizontalalignmentcommand-TableCellHorizontalAlignmentCommand.md) |                                                                                            |
| `'tableCellWidth'`                                                                | [`TableCellWidthCommand`](../../api/module_table_tablecellwidth_commands_tablecellwidthcommand-TableCellWidthCommand.md)                                                |                                                                                            |
| `'tableCellHeight'`                                                               | [`TableCellHeightCommand`](../../api/module_table_tablecellproperties_commands_tablecellheightcommand-TableCellHeightCommand.md)                                        |                                                                                            |
| `'tableCellPadding'`                                                              | [`TableCellPaddingCommand`](../../api/module_table_tablecellproperties_commands_tablecellpaddingcommand-TableCellPaddingCommand.md)                                     |                                                                                            |
| `'tableCellBackgroundColor'`                                                      | [`TableCellBackgroundColorCommand`](../../api/module_table_tablecellproperties_commands_tablecellbackgroundcolorcommand-TableCellBackgroundColorCommand.md)             |                                                                                            |
| `'tableCellVerticalAlignment'`                                                    | [`TableCellVerticalAlignmentCommand`](../../api/module_table_tablecellproperties_commands_tablecellverticalalignmentcommand-TableCellVerticalAlignmentCommand.md)       |                                                                                            |

> **Important**
>
> When the [table column resize](tables-resize.md) feature is enabled and the table has been resized, the cell **Width** field sets the width of the whole column through the `'tableColumnWidth'` command, rather than the width of a single cell.

> **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 many more.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-table>.

---

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