Implement table styles (alignment) like image styles

[jodator]

The table feature lacks defining table styles similar to the Image style plugin.

The alignment of table cells is a separate feature: ckeditor/ckeditor5#3218.

NOTE: Starting from 2020 Q2 it is possible to align tables by using the table styles panel. This option will work differently than predefined image styles mentioned in this ticket – table styles will be based on inline CSS styles, while image styles use predefined classes (more semantical approach). The semantic approach can still be applied to tables one day, though, so this ticket still makes sense.

• [ ] Re-check and close related issues that are solved by this one.

---

If you'd like to see this feature implemented, add 👍 to this post.

[Reinmar]

Just to make it more visible:

NOTE: Starting from 2020 Q2 it will be possible to align tables by using the table styles panel.

See the note in the first post in this thread.

[Reinmar]

@Mgsy, we're not going to work on this. The feature that we're working on in table styles is separate from this.

[Reinmar]

It'd be good to review the conflict that arose in the image feature between resize and image styles: https://ckeditor.com/docs/ckeditor5/latest/features/image.html#image-styles. The same conflict will cause our headache in the case of tables. If we want to change something in case of images, it'd be good to make that change before touching tables.

[Reinmar]

Media styles (alignment) is tracked in #2781.

[Reinmar]

DUP reported: #10289.

[bsmilling]

I completely agree that most of the table styles, like colors and widths, should be inline. But I think alignment should be based on classes, as you have multiple CSS properties (float, margin-left/-right) that need to be changed to get it to look good. Float alone doesn't cut it.

[Witoso]

Breaking changes notes:

1. We know that this implementation will be a breaking change (UI, placement of buttons).
2. Someone could write a feature that consumes margins, when we introduce this, we will be consuming this first. Let's say this is a BC.

Options:

• let's only add this to v48,
• Backported to v47
  • A "Glue" plugin for v47 with some custom logic or
  • Separate plugins TablePropertiesV2 (too complex) or
  • Only logic, no UI plugin, for v47. or
  • UI could be added as a separate plugin, logic under experimental flag? Conditions: 1) TablePropertiesEditing, 2) TableProperitesUIExperimental, and experimental flag for editing (upcasts), would need to be set.

Let's do the legit implementation first, and then we will decide how to backport.

[mmotyczynska]

Decision: The UI should be added as a separate plugin. The CSS class of the form should be switched to the experimental one. All logic should be placed behind an experimental flag, including all related changes such as Paste from Office.

[Witoso]

Just a quick update regarding this request.

Starting from CKEditor 5 v47.3.0, new experimental table block-alignment options are available. These options introduce left and right table alignment without text wrapping, effectively covering the main needs described in this issue.

To try them out:

• Enable:
  config.experimentalFlags.useExtendedTableBlockAlignment
• Load the experimental UI plugins:
  TablePropertiesUIExperimental and TableCellPropertiesUIExperimental

Details: https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-47.html#new-experimental-options

These improvements resolve the table-style limitations mentioned here (and other issues). The new behavior is planned to become the default in version 48.0.0 (~April).