Tables in Canvas

[japhill]

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

[Cherie_Lakes]

I copy and paste the tables in ...then go to the HTML code and copy this code into the <table> code:

<table class="table-striped" style="width: 100%;" border="1" cellspacing="0" cellpadding="6">

It makes a nice stripped table.   Doesn't solve the Heading row problem though but I really like the stripes.

[ma]

Hi Bill,

I tried your method (copy and paste the code into a Canvas content page), it only kept the table and text without border and color, did you make any other changes in your code before copy and paste into Canvas? I want to add background color to the first row, but it won't work. Thanks!

[stephanie_johns]

Canvas Production Release Notes (2016-04-02)​

One issue resolved! Thank you, Canvas!

Rich Content Editor

Cellpadding and Cellspacing Styles

The Rich Content Editor supports formatting for cellpadding and cellspacing values.

Explanation: When a user created a table in the Rich Content Editor and specified values for cellpadding and cellspacing, the values were being stripped from the content editor. Canvas code has been updated to respect cellpadding and cellspacing values. This change does not apply to tables placed within a table.

[bgibson]

I used this online table generator site:  HTML Table generator - TablesGenerator.com

I selected "Compact Mode" --> Copy to Clipboard --> Went to my Canvas course and switched to "HTML Editor" and pasted the code from the Clipboard.  *I think that is what puts all the necessary CSS into one compact unit with your Table HTML coding.  It put my table in the page, and I could then edit the cell contents.  Kept my cell coloring and borders.

[ahardesty]

I agree. The table editing in Canvas is very challenging. It is nice that there is an option to change background color and other features, but when published there is no consistency across browsers. I can create a table that looks good in Chrome, but has a thick dark border in Firefox. I end up just doing all of my table editing in Dreamweaver and then convert CSS to inline CSS using an online converter (such as MailerMailer Labs | Tools)​. This requires at least a low level knowledge of HTML coding and CSS which would be way too much to ask our faculty.

I would also like to see a better table editor and one that creates code that makes tables look correct in all browsers. Thank you for this suggestion. It definitely has my vote.

[atse]

I think you can post pictures, but not pdf tables. Great idea!

[cgaudreau]

Tables are not accessible without adding lots of code, so without a fully accessible table scheme I would suggest using the Style Guide to find alternate solutions such as Accordions or Tabs.

The Style Guide, besides being accessibility-friendly, also helps your content look the same across browsers and can be read easily in the Canvas apps.

[d_ellis]

Agreed, accessibility should not be overlooked - and it's really tough to make an accessible table. I had heard that some of the style guide formatting still doesn't work inside the Canvas apps though: Style Guide Elements in Mobile Apps

[cgaudreau]

 @d_ellis , the mobile apps are banes of my existence. Technology on our campus is a "whatever is best for the user" approach, meaning we still have to consider the apps in designing and redesigning courses. We have found that the few parts of the style guide we chose do indeed function across platforms and apps. Conducting usability testing across iOS, OS X, Windows and Android is a must for the Center for Online & Digital Learning.

However, in every case, the apps don't seem to cut it. And while I understand that App design and functionality comes secondary to a fully fleshed out web version, it would be great if we didn't have to shrug and say "eh" when a new faculty or student asks if they should use the app.

[slanders1]

OMGosh, tables seem SO limited. I'm still trying to figure out how to easily add borders or selected cell shading. Yes, I could go in and edit the code, but what a pain and certainly not what one would expect most instructors to be willing to do.

[don_bryn]

Using Canvas' HTML editor to create and style tables IS a pain, so I usually use another editor--one that is designed to create HTML code. . . NOT microsoft Word.   If you've ever looked at the HTML code Word generates, it's no wonder that it doesn't get easily parsed when pasted into Canvas.   It's full of gunk. . .

But I think if you insert the table in Canvas, switch to the HTML editor, copy the table code, and then paste it into any of the HTML editors mentioned in the comments here, you'll find it's much easier to edit and style your table how you want.   Then copy the HTML code and paste it back in the HTML editor in Canvas.   It's important that you copy the HTML code, not the WYSIWYG Table.

[slanders1]

Great suggestion, Don.

Unfortunately, for most of our instructors, using an external HTML editor, and then copying/pasting the code would be asking too much.

Sean

Tech Trainer @ Cuesta College

Sent from my iPad

[japhill]

Thank you Sean,

That has been my point all along.

Julia

Instructional Designer @ Rollins School of Public Health @ Emory University

[ssimpso4]

Does anyone know how to accomplish this feat? (A teacher user managed to do it, but by accident). The goal is to insert text so as to not alter the image's desired size.

Also, is there any update from Instructure in regard to the 'Gathering (of) info' related to this feature request?

Thanks!

[Chris_Hofer]

Looks like you would want to create a table with one row and two columns, and then specify the width of the columns as either a percentage of the screen (which would re-size for different users depending on their monitor size and screen resolution) or specify an exact number of pixels wide for the width of each cell.  The additional table cell within the right cell that contains the "WHAT IS REMIND AND WHY IT IS SAFE?" text seems unnecessary to me, so I would leave that out if I were building this in a course page.

[kmeeusen]

Stephen:

If you will note, the text in the right side cell is not text at all, it is an image. So this example was accomplished by playing with the image sizes using the grab bars.

Don't do this! Text images, because they are not really text, are totally inaccessible to screen readers.

Instead, you will want to set the total width of your one-row two-column table and the cells as Chris Hofer described. Then set the image size as a percentage of the cell.

KLM

[kcorp]

The right cell is editable text - can type and change the text. What makes it an image or text image? It's not a screen shot of text pasted into the table.

[Renee_Carney]

Thank you for taking the time to highlight this idea as a priority, and contribute valuable use cases for consideration.  Tables, or authoring in general, is an area that we care a lot about.  We expect to make improvements in this area (for all the reasons listed above and more) but it is not something we have scoped or planned at this time.  I am going to place this idea in archive until there are updates.  Please follow this thread to receive notifications of updates when they are made available.

[kmeeusen]

Sorry Kimberly. In the image you poseted, it looked like an image embedded in a table.

KLM

[Renee_Carney]

  Idea is currently in Product Radar Learn more about this stage...