Behavior of tables with CSS float attribute and alignments

[pszczesniak]

The trigger for this discussion was an issue reported during TP cksource/ckeditor5-commercial#5483 .

It shows us that something is not right when pasted table from MS Excel is interfering with other elements when it has active float: left/right attribute. To make it work (like previous) we decided to revert changes that sets the table alignment always - even when it's not set (to be default align="left"). 

Test file: table-with-paragraphs.test.docx 

---

Results of pasting content from Word into editor.:

CKEditor5 - Paste From Office:

CKEditor5 - Paste From Office Enhanced:

CK4:

TinyMCE without PowerPaste:

TinyMCE with PowerPaste:

---

---

Floating/alignment (left/right) table results

Let's use same content as above, but change the paragraphs into bulleted list and set table alignment to left.

Results:

CKEditor5 - Paste From Office:

CKEditor5 - Paste From Office Enhanced:

CK4:

TinyMCE without PowerPaste:

TinyMCE with PowerPaste:

:point_up: Table in TineMCE is left aligned but it's not set the text wrapping.

Summary:

1. As we can see on images above (1st comparsion of simple table and paragraphs) currently only CKEditor5 place default Word table on center, neither CK4 or TineMCE are doing it (default alignment is left BUT without any float).
2. Table with floats works (or not 😉 ) in same way in CKE5 and CKE4, TinyMCE just align the table and do nothing with text wrapping (content is always above and/or below the table).

For now we can change the table alignment but only with text wrapping (left/right):

Maybe would be good to consider options like MS is providing? :point_down:

---

Potential solution for ( https://github.com/ckeditor/ckeditor5/issues/8412 )

Maybe we can think about how to "push" the list so the markers wont lies inside table cells. We can use :has in CSS and detect if table has float (we should use some class not an inline style) and next element is a list - we can set a margin on the right/lest side of the table (depend on float and/or RTL). It's not a perfect solution but it should help a bit. WDYT? 🤔

[Reinmar]

Similar story as for images:

[Reinmar]

Maybe we can think about how to "push" the list so the markers wont lies inside table cells. We can use :has in CSS and detect if table has float (we should use some class not an inline style) and next element is a list - we can set a margin on the right/lest side of the table (depend on float and/or RTL). It's not a perfect solution but it should help a bit. WDYT?

Let's move this discussion to #8412.

[oleq]

To sum it up:

• In CKE5 a table is centered by default. It's an aftermath of our default content styles

.ck-content .table {
    display: table;
    margin: 0.9em auto;
}

• In CKE5, a left or right-aligned table always means float: left|right. This means there's an unavoidable interaction with the surrounding content and changes to the flow of the document.
• What I think we need is an "unaligned" option for tables that could be applied to the content pasted from Word in the main use case.
  • That option would visually render the table to the left (in LTR content) because of UA styles.
  • That option would not disrupt the flow of the document.
  • That option is quite hard to introduce because first we'd have to resolve the problem of default content styles vs. lack of alignment.
    • For the record, we're pretty much alone on the market with tables centered by default. Most of the editors use full-width tables regardless of the number of columns.
    • If "centered" style went from default-by-content-styles into a proper inline style, the "unaligned" would become the new default. Keep in mind this is a BC for integrators.
    • UX remark: If "unaligned + 100% width" would be our default, "left|centered|right" would mostly make sense for downscaled tables only.

[108signals]

@oleq do you have an update for this issue? we submitted this as #88562

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[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).