# Table caption

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

The [`TableCaption`](../../api/module_table_tablecaption-TableCaption.md) plugin lets you add captions to your tables. Table captions also improve accessibility as they are recognized by screen readers.

<a id="demo">

## Demo

In the demo below, click the table caption to edit it. Once you click the caption, you can use the table toolbar button to toggle the caption on and off.

<!-- 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, TableCaption, TableToolbar } from 'ckeditor5';

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

**CDN**

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

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

By default, the table caption is placed above the table. You can change the placement by setting [`caption-side`](https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side) in your [content styles](../../getting-started/setup/content-styles.md) for the `.ck-content .table > figcaption` style. Changing it to `caption-side: bottom` will display the caption below the table.

<a id="alternative-html-configuration">

### Alternative HTML configuration

By default, the plugin produces the `<figcaption>` HTML element to store the caption content. However, it is possible to use the `<caption>` element instead. To change it, use the [`useCaptionElement`](../../api/module_table_tableconfig-TableCaptionConfig.md#member-useCaptionElement) configuration option:

```js
table: {
	tableCaption: {
		useCaptionElement: true
		}
	}
```

<a id="common-api">

## Common API

<a id="ui-components">

### UI components

The [`TableCaption`](../../api/module_table_tablecaption-TableCaption.md) plugin registers the following UI component:

* The `toggleTableCaption` button

<a id="toolbars">

#### Toolbars

[`TableCaption`](../../api/module_table_tablecaption-TableCaption.md) plugin allows adding the `toggleTableCaption` item to the toolbar. 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)                                         |
| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `'toggleTableCaption'`                                                            | [`ToggleTableCaptionCommand`](../../api/module_table_tablecaption_toggletablecaptioncommand-ToggleTableCaptionCommand.md) | [`TableCaption`](../../api/module_table_tablecaption-TableCaption.md) |

> **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)