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
Renee_Carney
Community Team
Community Team

The Radar idea stage has been removed from the Feature Idea Process.  You can read more about why in the blog post Adaptation: Feature Idea Process Changes.

 

This change will only impact the stage sort of this idea and will not change how it is voted on or how it is considered during prioritization activities.  This change will streamline the list of ideas 'open for voting', making it easier for you to see the true top voted ideas in one sort, here.

James
Community Champion

Every now and then I tinker with Excel and using it to generate HTML tables that I can copy/paste into Canvas. For a year or so, I've had a spreadsheet that uses a user defined function (UDF) that will take a range of cells as input and return HTML code that can be pasted into the HTML editor in Canvas. It adds all the CSS styling inline. It's been a growing process and I kept adding optional parameters as new needs came along.

I came here looking to see if there was a better way, but didn't find one, so I thought I'd see if anyone else was interested or could provide insight into it.

I took a couple of days this week and revisited work I had started and abandoned over the summer modified it to read the formatting directly from Excel using Visual Basic for Applications (VBA) rather than specifying it as part of a calling function. I currently have two versions. One version still generates the HTML and sticks it into a cell in the spreadsheet. From there, you can copy/paste it into Canvas. The second version adds an item to the context menu (right click) that will take the cells that are highlighted, convert it into an HTML table, and stick that into the clipboard.

Why two versions?

  • If it's a user defined function, I can specify the extra spacing that I would like between columns and I can tell it whether the cell in row 1 column 1 should have row scope or column scope. However, it won't pick up formatting that is applied because you've styled something as a table. That is a limitation of Excel, it's not available when called from a UDF.
  • If I automatically put it into the clipboard, then I can't specify any options -- unless perhaps I provide multiple menu items.That means that it will default to the extra spacing and scope of the top left corner. It does allow me to pick up formatting as a table, but I can only guess as to the scope of top-left cell. This approach does require people to create a user form or to start with a spreadsheet that already has it.

I wrote it for my uses, which means that there is no column widths specified. I use cell padding on the left and right to get spaces between columns.  Here's some of the highlights. I don't use many of these features, so I don't know if I got them right.

  • A table caption is automatically detected if it's the only entry in the first row and in the first cell of the first row. 
  • If the first row of the table has any bold elements in it, it's is considered a header row with a column scope.
  • If any of the items in the first column of the table are in bold, they're considered a header for that row so they have a row scope.
  • If any of the cells inside the table but outside the first row or first column are bold, then they are styled with "font-weight: bold;" rather than inserting <strong>...</strong> into the cell's HTML
  • Except for the top row, I only look at borders on the right and bottom. Excel marks it such that if a cell has a left-border, the cell to the left has a right-border, so I only need to check one. This portion needs some work, I'm not a fan of borders except for horizontal ones as that seems to be the recommendation for good looking tables. But it may still be useful for people before I can get that fixed.
  • Borders do consider the thickness, style, and color. I did not duplicate the borders if the table is formatted as a table, but that's something to consider. Most of the time, I don't do this and it won't work in the UDF version. It's not that I couldn't detect borders when formatted as a table, I just need use modify all the code to use the DisplayFormat property, but again that's not usable as a user function and I don't like the way Excel adds borders (less lines = better table).
  • Font color, background color, and italics are recognized. They are left out of the CSS if the are the defaults (black for font and white for background).
  • For colors, I match the color codes to the known names of colors and replace them, so it will say "black" instead of "#000000".
  • Italics is stylized as "font-style: italic;" rather than inserting <em>...</em> into the HTML.
  • Left, right, and center alignment are considered. If there is no alignment specified, then it just uses the defaults.
  • Vertical alignment is ignored. This was kind of a design-override on my part. Excel defaults to bottom-aligned while I think they should be top-aligned. I don't want to go through and force top-align since I use it all the time.
  • It does not do any contrast checking and people can make bad decisions. It's goal is to transfer a table the way it looks in Excel into Canvas.
  • There is 0.75em padding on the left and right of each cell.

Here are some examples of the way they look in Excel and the way they look in Canvas. I left-align (in Excel) my first column and right align the others.

Test Table in Excel

299606_pastedImage_1.png

Test Table in Canvas

299607_pastedImage_2.png

Formatted as Table in Excel

299608_pastedImage_3.png

Formatted as Table in Canvas

299609_pastedImage_4.png

Tableau from Finite Math in Excel

299610_pastedImage_5.png

Tableau from Finite Math in Canvas

299611_pastedImage_6.png

I haven't tested this on a Mac yet, it's been a diversion from finals that need graded, but it's close enough that some people could benefit.

I thought I'd throw it out there and see if there was interest, or if there was something else that would allow me to take an Excel table and get it into Canvas so that it looks nice and is still accessible. I still think the ultimate solution is to develop styles at the account level and let people tag it using one of those styles, but this may help people who haven't done that.

Thoughts or better solutions?

kona
Community Champion

YES! There is interest! I'd definitely use this tool and it's a bonus that it not only looks nice, but is **accessible!**

James
Community Champion

 @kona  - You could have it anyway, but we're not instructional designers, so I don't know if my logic fits with the best practices. I do strongly dislike how Excel includes all kinds of formatting codes (same with Word), but I don't know if I've done it any better. In the past, I've tried using styles from the Canvas Style Guide, but they've announced they're deprecating that and we shouldn't rely on it.

jeremy_woodward
Community Explorer

 @richard_goans ‌ - Definitely see an interest in this tool, especially for our Math and Science teachers.

richard_goans
Community Novice

Checking it out now. 

richard_goans
Community Novice

@wes_sisco You may want to see this. 

richard_goans
Community Novice

 @wes_sisco ‌ You may want to see this. 

michaelg
Community Member

Reading through this thread, it's July 2019, the post started in 2016. 3 Years later and I feel we are all having the same exact issues, and it seems the best workaround is for me to somehow teach 900 teachers HTML coding so they can learn to successfully build multiple tables in Canvas. Is anyone else confused by this? 

Teachers are here to teach - not fiddle with Canvas and the HTML so they can get the table exactly the way they need it. 

Jeff_F
Community Champion

 @japhill ‌ - have you seen the new RCE?  This is on beta currently.  

tables

334702_advanced.png

To solve the issue I added color to the entire table and then when editing the html, moved the background color code from the table style line to the tr style which is two lines down.  Doing so removed the color from the entire table and applied it to only the first row.

334838_bg-color.png

The result - 

334839_result.png

And then I dug even deeper and noted the row properties feature which has its own color capabilities.  Voila!

334840_row-properties.png

jhseu
Community Novice

I just found this thread as I'm trying to cut and paste a table from MS Word to Canvas. This is helpful but I agree Canvas needs work if they haven't yet made it easier to use tables in Canvas! Hope they do so soon!

Chris_Hofer
Community Coach
Community Coach

 @jhseu ...

Copying tables from MS Word into Canvas may produce a lot of extra HTML code that just isn't needed for your page, and there are ways to clean up that code so that your page still looks the way you want.  A while back, I wrote a blog post about how to clean up your HTML code: HTML Cleanup‌.  I hope it may be of help to you.

anex
Community Novice

How do I get ahold of your VBA code to generate HTML tables from Excel?

twalther
Community Participant

Just discovered that the new RCE allows you to fix this "pasted table has no borders" problem - it's a little complicated, so I made some screenshots. You have to select all the cells and use the cell properties dialog box to add the borders.

Select all table cellsSelect all table cellsGo to the cell menu under table and select table propertiesGo to the cell menu under table and select table propertiesUnder Advanced, change border color to black (or whatever color)Under Advanced, change border color to black (or whatever color)Change border style to solid (or whatever style you want)Change border style to solid (or whatever style you want)Click save and ta da!Click save and ta da!

 

dlyons
Instructure Alumni
Instructure Alumni

Apologies there has not been any comment on this thread in some time.

I read through everyone's comments and the issues with tables I identified are broadly in two categories: 1. formatting options need to be available in the UI (no HTML required) and 2. copying and pasting tables from sources like Excel. 

For #1, the table editor in the new RCE in Canvas (now the only RCE Canvas) seems to address the concerns I found in the comments regarding borders, padding, colors, sizing, and captions/headers (for accessibility.) Woo!

For #2, structure is maintained when copy/pasting from Excel/Sheets/etc. but some formatting and any proprietary features will be lost. If you need those maintained I recommend embedding your tool of choice directly using File embeds, or the Microsoft/Google LTIs.

Finally, I want to thank all the folks who commented on making sure tables are accessible, and especially those who advise against using tables for layout ever. Students on mobile devices, computers made after 1998, and those relying on accessibility tools thank you very much!

KristinL
Community Team
Community Team
Status changed to: Archived

Based on the comments left here by D. Lyons, this thread is being marked as Archived. Thank you to everyone who participated in this conversation!