cancel
Showing results for 
Search instead for 
Did you mean: 
ericwerth
Community Coach
Community Coach

Advanced Table Style Examples?

Hi everyone, 

I am looking for examples of what can be placed into the "style" box of advanced table properties.  I have had no trouble using border/background color but the style box is another story.  At How do I insert a table using the Rich Content Editor?‌, the instructions state, "Style: The style of your table. You can add custom CSS styling to your table such as colors, borders, spacing, and alignment."  

I am not a CSS expert, and haven't found any examples online of text that can be pasted into this box in Canvas and change the appearance of the table.  Does anyone have any samples they can share of tables and the related CSS styling code?

Thanks in advance!

8 Replies
chofer
Community Coach
Community Coach

Hi ericwerth...

I'm not much of a CSS expert, so I chatted with someone from Instrucuture's Help Desk to see if they could help me out.  The "Style" box in the "Advanced" tab of "Table Properties" allows you to put in some CSS to alter the look of the table.  For example, I tried this in my own sandbox course:

Table Properties

As you can see, this puts a solid black border around the table with a width of 7 pixels.

I'm sure there are other things that people may suggest here that you could do to alter the look of the table, so I am going to convert your Question into a Discussion...since there doesn't seem to be one "Correct" answer.  I hope that's alright with you.

Hi  @chofer ,‌ thanks for the information and turning this into a discussion!  This will help changing the width of the border.  I wonder if there may be some other table formatting choices as well?  Looking online at table styles there are all kinds of options that change the overall appearance, but I can't see how that would be inputted into the advanced properties box.  It might not be available now, which is ok, but if there were some interesting table appearances that were possible I didn't want to overlook them!

samantha_mccar1
Community Member

Hi Eric, 

I have found another way of inserting very clear, colourful and formatted tables. I too have been struggling with the table properties and the CSS. I love a tiled look on my tables so I have been finding my recent move to canvas a little limiting. 

I have found a workaround which appears to work. What I have been doing is creating my table exactly how I want it to look in Microsoft Word. I then copy the table into a Word to HTML editor which converts the table into HTML text. This particular one has been a treat for me: Word To HTML - Online Visual HTML Editor, Converter And Cleanup. Once I have the HTML text, I go to the page in canvas, select edit and change it to the HTML editor. Find the place in the page where I want to insert the table then copy and paste the HTML into the HTML editor. When you change it back to the rich text editor the table will be almost exactly as it was in Microsoft word colours and all. Smiley Happy 

Below is an example of what the table could like in canvas. As you can see I do like my tiles. 

263102_pastedImage_1.png

If I need to embed images into the table I just upload and insert them into the table once it is in Canvas. 

I hope this helps in our quest for the perfect table in Canvas for those of us who are not HTML superstars. 

Hi  @samantha_mccar1 ‌

This is a great technique for folks who are not coders, and I have used it myself. One of the things that we did for our own faculty was to create an HTML version of our approved syllabus template that, once loaded into the Syllabus Description area, faculty can simply type the information into the blank syllabus fields. We pre-load the template on faculty request, then they fill in the blanks. The syllabus then, of course, copies into the next term's shell where it can easily be updated, preserving our approved template format and content. When we change our syllabus template for the school (something that has happened several times in the last couple years to help meet some accreditation goals), I update the template in word, then convert to a new HTML file that is again distributed to new faculty courses.

Kelley

This is great  @samantha_mccar1 !  I look forward to using this technique and passing it on to our faculty.  Thanks a bunch!

ahayson
Instructure
Instructure

Hi ericwerth‌,

Here are two links I personally found quite helpful, not sure if useful to your needs but who knows, maybe it will spark an idea. Here are some quick links:

I hope this helps!

- Am

I appreciate these links Deactivated user.  I will check them out and try some various table options in my sandbox.  Faculty have various needs when it comes to tables, so the more that I can figure out the better!

No problem ericwerth - let me know if you are looking for something more specific. I have a notebook full of goodies.