Styling Tables in Canvas

Tables are inherently boring, but you can learn how to easily apply some amazing styling with just a little bit of coding. Dress up your tables in your Canvas courses and become the envy of your colleagues.

Inserting tables is easy. When editing a page/assignment/announcement, etc., either click the Insert menu at the top of the rich content editor (RCE), or click on the table icon and choose how many cells you want in your table.

Once you create the table and enter your data, then you can customize some of the settings in the Table Properties menu by clicking again on the Table icon on the RCE. There you can adjust the width and height, determine cell spacing and padding, create a border and set the width (pro tip: rarely will you want a border thicker than “1”). In the advanced options, you can choose a border style, color, and background color. That’s pretty much the extent of the built in Canvas RCE options. That will give you a standard table:

This table conveys the information and is accessible, but lacks pizzazz. Technically, we could say that we want to make the table more classy, but the way to transform a table from the one above to the one below is by inserting css classes into the code.

To transform your table one step further, you’ll want to grab this code:

<table class="ic-Table ic-Table--condensed ic-Table--striped ic-Table--hover-row" style="width: 600px;">

After you create your table in the RCE, you’ll want to head over to the HTML editor by clicking the HTML button on the lower right corner of the screen.

This will take you to the behind-the-scenes page where you can access your HTML code for the page. You’ll want to locate your table code, which may look something similar to this:

<table style="border-collapse: collapse; width: 99%; height: 230px;">
<thead>
<tr>
etc…

You will want to replace that first line with the new code, so that the table looks something like:

<table class="ic-Table ic-Table--condensed ic-Table--striped ic-Table--hover-row" style="width: 600px;">
<thead>
<tr>
<th style="width: 20%;"></th>
<th style="width: 40%;">Team A</th>
<th style="width: 40%;">Team B</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 121.307px;">Monday</td>
etc…

The class=" " is referring to CSS code that is on the Instructure/Canvas servers. We are asking for 4 different classes to be added to our table.

ic-Table - telling the Canvas page that this is a special table
ic-Table--condensed - this removes the excess space above and below the words
ic-Table--striped - this alternates the shading so every other row is colored
ic-Table--hover-row - this gives the effect of shading when the mouse hovers over the rows

One thing I’ll note about the striped feature is that this is much better than manually shading every other row, because if you have to add/remove rows then it still automatically shades every other row.

If you would like to see these tables, and more, in action, visit my HowToCanvas course.

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas​

Instagram: https://www.instagram.com/HowToCanvas​

Facebook: https://www.facebook.com/HowToCanvas