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

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

Planets of the Solar System

Name Mass (1024kg) Diameter (km) Gravity (m/s2) Length of day (hours) Distance from Sun (106km) Mean temperature (°C)
Mercury 0.330 4,879 3.7 4222.6 57.9 167
Venus 4.87 12,104 8.9 2802.0 108.2 464
Earth 5.97 12,756 9.8 24.0 149.6 15
Mars 0.642 6,792 3.7 24.7 227.9 -65
Jupiter 1898 142,984 23.1 9.9 778.6 -110
Saturn 568 120,536 9.0 10.7 1433.5 -140
Uranus 86.8 51,118 8.7 17.2 2872.5 -195
Neptune 102 49,528 11.0 16.1 4495.1 -200
Planetary facts taken from Nasa’s Planetary Fact Sheet – Metric.

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

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, Table, TableCaption, TableToolbar } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        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 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.