Default table properties when inserting new table.

[remigasas]

📝 There must be a way to configure default table/cell properties when inserting new table.

This is related to new table styling tools.

Right now, when adding a new table it is added as plain html element <table><tr><td>content</td></tr></table>
With introduction of table styling it is possible with "balloon" to choose table border to 'none', however default styles is coming from css ( and defaults have borders ), therefore choosing 'none' for border styles does nothing.

This is an example from demo page:

You can see that, option says none, but css adds borders.

I'm not sure if this is bug/feature/documentation.

I'm looking for a way to programmatically or through configuration apply default styles for newly inserted tables, so that plugin would correctly display current status and allow to change it.

[Mgsy]

cc @oleq

[oleq]

These are styles present only when editing content in CKEditor 5. They will no longer be visible when you destroy the editor.

This may look strange but this gray border is used because without it users would get easily lost in bigger tables if there was no indication of what the cell boundaries are. They would need to click and guess if they are in a particular cell or not, a game of trial and error. So, you see, this is a kind of trade-off, we slightly sacrificed the user experience of the "Cell properties" pop up to improve the general feel and navigation.

Do you have any suggestions as to how we could improve this?

[Reinmar]

A bit related issue: #6314.

Isn't the solution to the issue reported by @remigasas to do .ck-content td, .ck-content th { border: unset } (with possible tweak needed for style specificity? Or perhaps setting the default style to something like a very bright dotted/dashed border to indicate where the table is, but not looking like a real border?

I agree with @oleq that some border is necessary. It would make absolutely no sense from UX perspective to have no border by default.

The default value, though, is set via a stylesheet and you can override it if it doesn't work for you. So, IMO, it's all fine here, although it may be slightly confusing. I'd say this is more of a documentation issue. Same with the "don't use border-collapsed if you want to allow styling borders".

[remigasas]

To repeat myself in a different words, table properties does not represent correct properties set for table ( this is a bug, in my opinion ).
As a user, if I see table with border and I open properties window, I expect to see correct value set ( in my example above, it shows borders style as "none", but cell actually has borders (yes it comes from stylesheet)).
I cannot change default styles, because as you say, by default, adding a table without borders is bad UX.

However it is very likely that users want to use "invisible" tables for layout ( ex. set borders to none, set percentages and add content to "invisible" table ). And for that they would need to remove borders.

For example this is how ck4 did it ( taken from your demo page ).

[Reinmar]

I cannot change default styles, because as you say, by default, adding a table without borders is bad UX.

But you can do exactly what CKEditor 4 does. The "none" style is not kept in the data. If you set the border to "none", the table is returned without any border. Hence, you can control that via a stylesheet.

[remigasas]

No, I cannot do same. Ck4 works differently then ck5 ( version 4 actually handles styles, version 5 does nothing ).
Unless you are proposing to start with "invisible" table and force users to click in every cell and add styles manually ?

[Reinmar]

The only thing CKEditor 4 does is adding a stylesheet that adds this soft, dotteted border to all table cells. This is done via a stylesheet, so whenever the user sets something in the UI the stylesheet is overridden with that style.

You can do exactly the same thing in CKEditor 5 – have the cells styled very softly in the editor via a stylesheet. That style will not be output with getData() so the data will be clear. Exactly the same situation as in CKEditor 4.

[Reinmar]

I explained the solution in detail in #6841 so I'm closing this issue as a DUP.

[kjakub]

end up here as well, wanted default border for table once is created in ckeditor

[tony]

@remigasas @Reinmar Hi ! I arrived via Google search 😊

(I hope this isn't disruptive! I'm just a little confused and hope to clarify this.)

I'm going to create another thread - it's difficult for me to decipher, but I think this issue had its original direction changed.

1. The topic changed from having a title about default properties to something else:

   • First topic (default properties):

     📝 There must be a way to configure default table/cell properties when inserting new table.
     ...
     I'm looking for a way to programmatically or through configuration apply default styles for newly inserted tables, so that plugin would correctly display current status and allow to change it.

   • Second topic: clearing styles, "None" vs none

     This is valuable, but seems suited for a second issue - it doesn't resolve setting default properties IMO

2. it was closed as a duplicate and points to How to make table border=none setting work? #6841, but it differs from the topic title and original issue (what @kjakub, me, and other visitors are probably looking for)

[tony]

For the original issue, I created a new issue at #9219 to narrows the scope to just having default fields set via configuration.

[remigasas]

Thanks @tony and any other visitor that request this functionality.

I do agree, that this topic might be two issues, but I also think that they are so connected, that it might be better to handle them as one.
I purposely write description without clear description on how it should be fixed. I think CK team should decide what is better for them and their customers. IMHO 2nd issue for sure is a bug, and 1st is nice to have ;)

Cheers.

[tony]

@remigasas Thank you!

I still don't fully understand this and the #6841 issue yet. To avoid ambiguity, I made an issue at #9219 about setting defaults via editor configuration:

{
  table: {
    tableProperties: {
      defaults: {
        borderColor: 'red',
        borderWidth: '1',
        borderStyle: 'solid'
      }
   }
}