CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Table Support with Column Resizing Documentation

CKEditor 4 supports creating and editing tables, including more advanced table manipulation features such as inserting or deleting cells, rows and columns, merging and splitting cells, or adjusting various table properties such as text and background color, vertical and horizontal alignment, border colors and widths, cell spacing and padding and so on. These are all available from the table context menu.

These features are provided by the Table, Table Tools and Table Selection (CKEditor 4.7+) plugins which by default are available in the Standard and Full installation packages.

Starting from CKEditor 4.7 you can now use the unique custom selection system for tables to, for example:

  • Select an arbitrary rectangular table fragment — a few cells from different rows, a column (or a few of them) or a row (or multiple rows).
  • Apply formatting or add a link to all selected cells at once.
  • Cut, copy and paste entire rows or columns.

Additionally, you can also add an optional Color Dialog plugin which provides a user-friendly way to select the cell background and border color through a dedicated dialog window.

An optional Table Resize plugin adds support for column resizing with your mouse. Hover your mouse over the column border to see the cursor change to to indicate that the column can be resized. Click and drag your mouse to set the desired column width.

Refer to the Table Support with Column Resizing article to learn more about this feature.

Related Features

Get Sample Source Code

  • Table support with column resizing 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Table support with column resizing</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.replace('editor1', {
      extraPlugins: 'colordialog,tableresize',
      height: 470,
      removeButtons: 'PasteFromWord'
    });
  </script>
</body>

</html>