CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

guideTable caption

The TableCaption plugin lets you add captions to your tables. Table captions also improve accessibility as they are recognized by screen readers.

# Demo

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

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

By default, the table caption feature is not included in the predefined builds and must be installed separately.

To enable the table caption feature in your editor, you need to have the @ckeditor/ckeditor5-table package installed (it is already present in the predefined builds):

npm install --save @ckeditor/ckeditor5-table

Then add the Table, TableToolbar, and TableCaption plugins to your plugin list and configure the table toolbar:

import { Table, TableCaption, TableToolbar } from '@ckeditor/ckeditor5-table';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Table, TableToolbar, TableCaption, Bold, /* ... */ ],
        toolbar: [ 'insertTable', /* ... */ ],
        table: {
            contentToolbar: [
                'toggleTableCaption'
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Read more about installing plugins.

By default, the table caption is placed above the table. You can change the placement by setting caption-side in your content styles for the .ck-content .table > figcaption style. Changing it to caption-side: bottom will display the caption below the table.

# Common API

# UI components

The TableCaption plugin registers the following UI component:

  • The toggleTableCaption button

# Toolbars

TableCaption plugin allows adding the toggleTableCaption item to the toolbar. It is possible to configure its content.

# Editor commands

Command name Command class Belongs to (top–level plugin)
'toggleTableCaption' ToggleTableCaptionCommand TableCaption

We recommend using the official CKEditor 5 inspector 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.

# Contribute

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