Table Support with Column Resizing

CKEditor 4 support for creating and editing tables is provided by four separate table-related plugins as well as two helper plugins.

• The Table plugin – adds the Table Properties dialog window with support for creating tables and setting basic table properties, such as:
  • Number of rows and columns.
  • Table width and height.
  • Cell padding and spacing.
  • Table headers setting.
  • Table border size.
  • Table alignment on the page.
  • Table caption and summary.
• The Table Tools plugin – adds a more advanced context menu for table items and the Cell Properties dialog window with support for features such as:
  • Cell type.
  • Cell width and height.
  • Word wrap settings.
  • Horizontal and vertical alignment.
  • Row and column span.
  • Cell and border color.
  • Inserting and deleting cells, rows and columns.
  • Merging and splitting cells horizontally and vertically.
• The Table Resize plugin – adds support for column resizing with your mouse.
• The Table Selection plugin (CKEditor 4.7+) – introduces support for the custom selection system for tables that lets you:
  • 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.

The following two helper plugins extend the Table Properties and Cell Properties dialog windows with additional features:

• The Color Dialog plugin – provides a user-friendly way to select the cell background and border color through a dedicated Select Color dialog window with a color table.
• The Advanced Tab for Dialogs plugin – provides the Advanced tab for the Table Properties dialog window and allows for setting the table ID, language direction, inline CSS style and stylesheet class.

The Table, Table Tools and Table Selection plugins are included in the Standard and Full installation packages. Color Dialog and Advanced Tab for Dialogs are only available in the Full distribution, while the Table Resize plugin is optional — they may be added to your CKEditor build.

The following image presents a table that you can create in CKEditor 4 along with the table context menu options provided by the Table and Table Tools plugins.

# Table Resizing with Your Mouse

When enabled, the optional Table Resize plugin adds support for column resizing with your mouse.

You need to 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.

# Table Support Demo

See the working “Table Support with Column Resizing” sample that showcases CKEditor 4 support for creating and editing tables, including table column resizing with your mouse.

# Related Features

Refer to the following resources for more information about tabular data support in CKEditor 4:

• The Paste from Excel plugin allows you to also paste content from Microsoft Excel and maintain original content structure and formatting.