[Rich Content Editor] Add an option to set a table's borders to be collapsed or separate.

[JeffCampbell]

Currently, table properties allow for Cell Padding and Cell Spacing. Cell spacing will not be visible when the border-collapse property is set to collapse, but will be present when set to separate. I am attempting to make a series of tables (shown below) to visually demonstrate how the cell padding and cell spacing options in the table properties impact the look of the table. By default, the cell spacing property appears to have no impact, which means having the property so easily adjustable to users without the ability to edit the border-collapse property is useless. I have to edit the HTML to make it work, but many users might seem anxious about using the HTML editor. This also creates another issue...the editor is resetting these edits.

With the newer RCE, the ability to type in style values in the table properties is no longer available. If I want to change the border-collapse style from collapse to separate, I have to edit that in the HTML to say "border-collapse: separate;" However, if I go to click on the table properties in the RCE any time after making that edit, it will change the code back to "border-collapse: collapsed;" every time. It will even do this if I have saved the page and come back later to make more edits. This creates additional workload to set the table back to the desired outcome.

Could a checkbox or dropdown be added to the Advanced section of the table properties that allows users to set the border-collapse tag to the desired value so that users can make use of cell spacing without needing to edit HTML codes, and possibly so that editing table properties will stop resetting this value? This option could also be next to the Cell Spacing box with a note that spacing will not be visible without turning on the "separate borders" option.

Here is the html for one of the example tables I was making that keeps resetting:

<table style="border-collapse: separate; width: 318px; border-color: #f5a871;" border="10" cellspacing="30">
<tbody>
<tr>
<td colspan="3">
<h2 style="text-align: center;"><span style="font-size: 18pt;">Cell Spacing = 30</span></h2>
</td>
</tr>
<tr style="height: 93px;">
<td style="width: 103px; text-align: center; height: 93px;">
<h2><span style="font-size: 36pt;">Test</span></h2>
</td>
<td style="width: 102px; text-align: center; height: 93px;">
<h2><span style="font-size: 36pt;">Test</span></h2>
</td>
<td style="width: 103px; text-align: center; height: 93px;">
<h2><span style="font-size: 36pt;">Test</span></h2>
</td>
</tr>
</tbody>
</table>

And here is the intended outcome:

[susanf1]

I agree with this suggestion. I rely on tables in my course design and they often get messed up. I do not have the skills to change the html. I am not sure if this adds to the issue, but I would like to have more control over cell width. Even when I set the width, Canvas reverts back to... whatever it wants. I end up with videos in very small cells and text in cells that are way too big. I looks unprofessional. I have talked with support several times about this. They end up going in and modifying the html. 

[JeffCampbell]

@susanf1 I have noticed that sometimes, something in a table gets edited but does not show up correctly until I save and get out of the editing mode. I presume for you, it still looks off outside of editing mode. How are you editing the cell width? Are you dragging the cell border or are you changing it in the cell properties? Maybe I might have a thought as to what might be the root cause of your dilemma.

Another thing to consider is that if you change multiple cells to conflicting values, that could cause the issue. For example, you have two cells in a row and you set one for 80% and the other for 30%. 

[susanf1]

@JeffCampbell Jeff--I am dragging the cell border. Sometimes that features does not work at all. Sometimes that feature will let me adjust the cell width and then when I hit save and refresh, something completely different. I generally stay away from editing the cell width in table properties. I tried that and really screwed things up. The problem didn't seem big enough to invest in the html learning needed to do it right. 😊

So--if you are interested--here is the challenge. I use tables to "package" lessons, see below. I just went into this table and adjusted the width by moving the borders. Save. No change. Sometimes however, the video column shrinks very narrow. Students usually watch the videos within the grid... not expanding. So that make a problem. I have talked with support several times. The tech usually goes into the html and adjusts for me. The problem has been "elevated" more than once. I have resigned to it now. But, if you have a simple solution.... I am ready to learn.

Thank you for your input.

[JeffCampbell]

@susanf1 

From the image, it looks like the videos are larger than the cell. It is possible that is what is causing the issue for cell sizes. There might be an easy solution. After adding the video, click on it while still in the editing screen. There will be a little pop up that said Image Options or Video Options. Open those options. There should be a setting to have it display a link instead of the video. When students use the link, it opens in another tab. This might help with the cell sizes, and it means students can watch the video in a more expanded view.

Dragging the cells borders works well. When making a new table, it just makes it harder to set an exact width.

For that, we would need to develop a series of steps for you to exactly control the cell width's in a table, then how to add content from there. If you are nervous about doing editing and maybe messing it up, I am sending a Private Message using Canvas's messaging system. That way, we can try to find a solution that works with your comfort level.