Tables in Canvas

(3)
Both creating and copy/pasting tables in Canvas (the rich text editor boxes) seems problematic and difficult.  The table structure is lost and only text copies into Canvas from MS Word and Excel when using the Firefox browser. When using chrome, one can see that the table copied into the rich text editor, however, when saved, the table properties, such as borders are not visible. When creating tables from scratch, the formatting options are difficult to understand and limited in scope. For instance, I cannot figure out how to insert shading into the top row of cells only.  When I tried to shade them, the entire table became shaded. While there are limited examples of formatting in the instructors' manual, they do not fully explain the process.  For instance, yes, you can insert "5" for borders, but what will that look like in my table - is that very thick or very thin? (Rhetorical question)  To format a table I just created, I went into the HTML code of a Blackboard table and copied it.  That is not the way I want to go about this.  Lastly, while I have some HTML knowledge, most of our instructors and students do not, so wouldn't have a clue where to begin with this.  I hope to see this feature become more intuitive and user friendly.

 

Any suggestions from power users out there for workarounds? I see that this has been a topic in the past, but evidently without changes to the software?  I'm curious if it's not a big deal for others?  I typically use tables quite a bit in my courses.

 

Regards,

Julia Phillips

76 Comments
lbooth
Community Member

Wow, am I glad to have found this discussion after a day mostly wasted time fooling around with the RCE and tables.  Clunky is the most polite word that comes to mind.  Until now I was a Bb user and tables in Bb while not wonderful at least could be reliably edited and were close to wyswyg.  Canvas is not.  This thread does have some good info that I will try tomorrow, but seriously, I teach business, do I want to be an html coder? Not so much.  The idea of working over the html code for style seems absurd unless you get paid to program in html.  I get paid to teach business online.

I use the table guide for this and up to a point it is okay, but when I have three tables on page, with dividers it gets flaky, a very technical term.  The cursor will jump to the top table as I try to place it on another part of the page.   Another example, I have deleted some text in a table and then find that the text in the table below then appears in place of the text just deleted.  It also seems touchy (tech term) and unreliable to add CR/LF below a table.

Kind of snarky but this should be easier.  I'll post some screen shots. 

Nevertheless this thread has been helpful.

gharbor
Community Participant

As an online instructor and trainer for LMS's over 12 years I think it's crazy that we spend so much time focused on other features when the core business of building content, which most teachers do daily, is still so hard. 

Even something as simple as been able to get to the table settings by right-clicking within the table, is not available yet.

I find myself having to apologise to teachers weekly about the poor functionality of the Rich Content Editor in general yet Canvas archives improvements to this core aspect of the platform.

Can this (and other editor improvements) please be re-tabled for discussion? 

If many people in this thread are using alternate table generation tools and then copying them into Canvas, does this not shout the message that Canvas is missing the mark?

Thoughts?

japhill
Community Novice

I couldn't have said it better.  In full agreement. 😞

brandon_luke
Community Novice

I came across a weird problem that relates to this discussion. The problem relates to changing the color of the border for a table. I am not sure what is happening, so I will just show a picture. The picture is of the corner of the table. I zoomed way in so that it is easier to see that the color is not uniform.

224675_Table.JPG

Below is the HTML that is stored in Canvas.

<table style="border-color: #009C9C; height: 174px;" border="5" width="100%">
<tbody><tr><td>CONTENT HERE</td></tr></tbody>

d_ellis
Community Contributor

I'm not certain, but the problem probably comes from the fact that you're declaring the border's size using the HTML attribute, but its colour from the style attribute. Effectively, it is interpreting that colour declaration as a separate border, and then it tries to collapse the two borders into one multicoloured mishmash. If you change your code to this, the border becomes one uniform colour:

<table style="border: 5px solid #009c9c; height:174px;" width="100%">

James
Community Champion

 @brandon_luke ‌, in addition to what  @d_ellis ‌ said, the border attribute on table has been deprecated and should not be used.

Here's the relevant section from that page:

224671_pastedImage_1.png

By the way, that same (similar) comment exists for align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary, and width.

This page on talks about the JavaScript version of it, but it says that the border attribute was deprecated in HTML 4.0 and provides this warning:

224726_pastedImage_2.png

colleen
Community Participant

We use tables as question boxes within a quiz questions and after our first year of trial and error have them looking reasonably even and okay. But it hasn't been easy.

But we are frustrated with the fact that there isn't a quiz question alternative where we can create a table for the students to complete. The only way we can do this is to have a table in Google that they download, complete and then upload. 

For the poor assessor who is marking up to 175 students work where this is just one of the questions, it is so time consuming to open 175 documents to read it. 

It would be really great for there to be a table embedded in the question that the student just completes and is immediately visible when marking. Is this such a big ask. 

I would imagine that this would be an extremely popular feature in the area of mathematics, science and lots of other subjects.

brandon_luke
Community Novice

I modified the HTML as you noted and it worked great. Thanks! The original HTML was generated by Canvas Pages. This is probably one of the reasons it was deprecated  @James ‌. Many thanks to you both!

James
Community Champion

 @brandon_luke , you've picked up on an area that frustrates many instructional designers and those who care about accessibility. They want to do things the right way and separate style from content, but Canvas makes it difficult. In addition to make it hard to do it the right way, some of their tools make it easy to do it the wrong way. The default table comes up plain, but it's really easy through the table button to add those deprecated properties.

The Canvas page is delivered with <!DOCTYPE html>, which is HTML5 according to the W3C Quality Assurance Recommended list of Doctype declarations. As such, it shouldn't be encouraging things that are deprecated in HTML5 as that forces the browser to rely on previous behaviors and perhaps undocumented features. Canvas has gone to lengths to make it difficult to make a page unusable by only allowing certain styles and tags, which I believe is generally a good thing. But in other cases, they make it easy to do bad things like using absolute sizes with fonts and put in deprecated attributes.

As with many things, the problem has no easy solution. You could force people to do it the right way, but Canvas is about being easy for the user and doing it the right way isn't easy as many people learned their HTML coding without CSS. And the style attribute is difficult for people to get right and require that they look up CSS (not fun). My recommendation would be to allow the border option for ease, but then automatically convert into a style that is applied in the right location rather than adding the deprecated attributes. Of course, you then have to make sure that they don't generate conflicting directives like putting border=5 in the table properties and style="border-width: 20px;".

Anyway, I'm digressing -- I'm glad you were able to get it figured out.

d_ellis
Community Contributor

Hey  @James , if I remember correctly Canvas uses TinyMCE for their rich text editor. Is this deprecated table code coming from that, and are TinyMCE bug reports like this one describing the same issue?

Use standard CSS properties for table borders, padding and alignment · Issue #625 · tinymce/tinymce ... ‌

EDIT TO ADD: whoops, looks like I'm repeating myself from this same discussion: https://community.canvaslms.com/ideas/4513#comment-42849 

James
Community Champion

 @d_ellis , that does seem to be describing the same behavior. Canvas is using TinyMCE 4.1.9, with a release date of 2015-03-10 and that bugs was reported 2015-04-23, so it's likely in the version that Canvas is using.

This is part of the dilemma of running stable versions of libraries. They're stable, which is really important, but they don't keep up with the standards.

While looking up when it became obsolete, I came across 11 Obsolete features — HTML5  from the W3C group. There's a note at the bottom of 11.2 that reads:

The border attribute on the table element can be used to provide basic fallback styling for the purpose of making tables legible in browsing environments where CSS support is limited or absent, such as text-based browsers, WYSIWYG editors, and in situations where CSS support is disabled or the style sheet is lost. Only the empty string and the value "1" may be used as border values for this purpose. Other values are considered obsolete. To regulate the thickness of such borders, authors should instead use CSS.

What  @brandon_luke  did was to use border="5", which is now considered obsolete (not just deprecated). So, does Canvas allow it but make it be a 1? Or do they disallow it completely? Or do we get a newer version of TinyMCE?

And even if TinyMCE blocked it, it's still allowed by the Canvas code that strips the disallowed tags (just in case someone tries to send bad code directly through the API). So, disallowing it requires multiple things, and in a world where browsers still support deprecated and obsolete code, there's no imperative to do make the change.

jblumberg
Community Contributor

I know this feature request and discussion may be a bit in the past but I wanted to chime in.

Generally users want to do two very different things with tables:

  1. Create tables of data
  2. Layout elements on the screen

Laying out elements on the screen seems to be the most common use of tables that I have seen in Canvas.  Serious web developers have stopped using tables for laying out elements on the screen.  Tables don't resize well for mobile devices in these cases.  What we need is a WYSIWYG tool for building responsive design pages.

There are numerous page builders that have been designed for other platforms outside of the LMS world.  Checkout "Visual Composer" or "Page Builder" for some ideas (these particular ones are specific to Wordpress).

I wrote a custom CSS for our version of Canvas that implements a responsive design framework for laying out elements on the screen.  Unfortunately it is only useable by faculty who know HTML.   CIDI Tools starts to get at some of these goals by providing a WYSIWYG interface.... but it really requires Instructor to implement something like this fully.  

I strongly suggest that Instructure develop a flexible, responsive design page builder for Canvas.

p.s.  In house we defined our own table CSS (we have a few options including zebra striping alternating rows to make the data easier to read).  It is very tedious to format tables using inline html code... I would go so far as to say that you shouldn't do it.  That said, we never use tables for layout anymore and rely on our in house responsive design framework.

tobe_baeyens
Community Contributor

I had some issues creating tables with merged cells. I did find out that this is very easy with Excel. After you create the table you can copy it to the RCE. It doesn't copy formatting but it will copy all the cells with data. The html code looks very clean. Afterwards it's very easy to add some formatting in the RCE. I also use table properties to add a border (f.e. 1) and border colour (f.e. black).

szahedi
Community Novice

Hi all, when I create a table one of the columns loses its border once I save the page. Does anyone else have this same problem? And do you have any suggestions for this?

moore
Community Novice

I use tables frequently to manage navigation on various Canvas pages.  This has lots of potential for users, but it would be great to have a more flexible table tool.

For the original question about copying tables, one work-around is to copy a table from the html editor of the source page to the html editor of the destination page.  Formatting is preserved and this operation doesn't require knowledge of html.  You can create the table on the source page from the table editor and then switch to the html editor to copy.

kete
Community Novice

Tables are so important for managing the page in Canvas, this to me is a major issue.  I feel it is very clumsy and time consuming the ways tables can be reformatted and created.  I for one would like to see this developed sooner rather than later . . . this is a tool that is supposed to make our jobs easier not more complicated.

japhill
Community Novice

Yes, I do that.  But it doesn't work for a table one has created in MS Word.  At least I'm not techy enough to find that code.  There shouldn't have to be workarounds IMHO.

~Julia

japhill
Community Novice

Yep. Totally agree. I started this thread 2 1/2 years ago and still struggling with this.  No resolution at all from Instructure.

Thanks for adding to the thread.

~Julia

kete
Community Novice

Yes, I saw the date on the first entry and decided that it needed to be talked about again.  I think Canvas has a nice platform for the most part but the issues with the tables creates a very limiting situation.  This tool is supposed to be something that is easy to use, not something that you need to learn HTML to get it to do what you want.  That is the clumsy part.

moore
Community Novice

I couldn't agree more. Tables has lots of potential to make a Canvas site more effective.

The Table Properties menu is a very primitive front end tool for creating tables.  There is no guidance for entering values in the menu boxes.  As a result almost everything involves trial and error.