Table Tools logo

Table Tools plugin

Table widget and tools for working with it
Table Tools screenshot
Table Tools screenshotInsert table screenshotInsert table screenshot
Table Tools logo

TinyMCE Table Tools is a set of plugins for creating editing tables on your website pages.

The bundle contains complete suit for making easy creating tables, adding, moving and deleting rows and columns, configuring styles of table, selected row or cell.

The bundle contains these plugins:

  • TinyMCE New Table. Insert new table in quick but advanced mode. Easily choose number of rows and cols like in Office app and the table is being inserted.
  • Table Configuration. Edit classes, styles and attributes lists, add predefined styles and manage global table options which will affect to all cells (like text align).
  • Table Column Configuration. Configure multiple cells combined in one column.
  • Move Table Column. Moving selected column to the left or to the right.
  • Insert Table Column. Inserting table column to the left or to the right.
  • Delete Table Column. Select & delete selected column by pressing toolbar button.
  • Table Row Configuration. Configure table row's styles, classes, attributes and other options.
  • Move Table Row. Moving selected table row below or above.
  • Insert Table Row. Select a cell or row and insert new row below or above of it.
  • Delete Table Row. Select and delete selected row.
  • Table Cell Configuration. Edit each cell's options with this plugin. Full control on cell's classes, styles and attributes.
  • Insert Table Cell. Insert cell near selected one.
  • Delete Table Cell. Easily remove selected cell.
  • Merge Table Cells. 3 buttons for merging table's cells.
  • Split Table Cell. Split table cell horizontally or vertically.
CKEditor 4 logo CKEditor 4
TinyMCE 6 logo TinyMCE 6
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Table Tools plugin in CKEditor 4

Download Table Tools
ZIP archive of Table Tools for CKEditor 4

Then do these simple steps:

  1. Copy TableTools directory to ckeditor/plugins/.
  2. Edit CKEditor config and add TableTools to extraPlugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Using config file
Using initialization script

Example of configuring with config.js

If you prefer to edit config.js config file of CKEditor or when your CKEditor initialization code is placed inside some non-editable part of CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "TableTools";
};

Example of configuring inside initialization code

Some CMSs do not use config.js file and let to edit CKEditor initialization script only. Do this changes there:

CKEDITOR.replace("#editor", {
    extraPlugins: "TableTools",
});

Install Table Tools plugin in TinyMCE 6

Download Table Tools
ZIP archive of Table Tools for TinyMCE 6
Self-hosted TinyMCE 6
Cloud TinyMCE 6

Install the plugin to TinyMCE 6 hosted on your server

  1. Copy TableTools directory to tinymce/plugins/.
  2. Edit TinyMCE config and add TableTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "TableTools",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

  1. Copy TableTools directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Table Tools plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add TableTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "TableTools",
    external_plugins: {
        "TableTools": "http://example.com/public/TableTools/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Table Tools plugin in TinyMCE 5

Download Table Tools
ZIP archive of Table Tools for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy TableTools directory to tinymce/plugins/.
  2. Edit TinyMCE config and add TableTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "TableTools",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

  1. Copy TableTools directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Table Tools plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add TableTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "TableTools",
    external_plugins: {
        "TableTools": "http://example.com/public/TableTools/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Table Tools plugin in TinyMCE 4

Download Table Tools
ZIP archive of Table Tools for TinyMCE 4

Then do these simple steps:

  1. Copy TableTools directory to tinymce/plugins/.
  2. Edit TinyMCE config and add TableTools to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "TableTools",
});

Refer to TinyMCE add-ons installation manual for more details

Reviews

Table management functionality is like a TinyMCE table plugin. Moreover the tables could be styled with Bootstrap or Foundation CSS. It's really cool!

User icon
Mandeep L.
Freelancer

Tell a friend about Table Tools

Send