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 to toggle the caption on and off.

Planets of the Solar System

Name	Mass (10²⁴kg)	Diameter (km)	Gravity (m/s²)	Length of day (hours)	Distance from Sun (10⁶km)	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.

Installation

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' ), {
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;', // Or 'GPL'.
		plugins: [ Table, TableToolbar, TableCaption, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			contentToolbar: [
				'toggleTableCaption'
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

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

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '&lt;YOUR_LICENSE_KEY&gt;',
		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.

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 configuration option:

table: {
    tableCaption: {
        useCaptionElement: true
        }
    }

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`

Note

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.