Striped Table

The striped table below is actually almost easy enough to have been placed near the end of the Beginner's module. What I like about this table is that, after creation, it can be completely edited using the Rich Content Editor. You can type directly into the fields, and when you get to the last field in the last row, you can tab to create a new row with the appropriate shading. The example below is set up to be a contact list, but this table could be used just like any other table, or the links to email addresses could be changed to links to content pages.

Name	Email address	Title	Role
Kelley L. Meeusen	kelley.meeusen@cptc.edu	eLearning Coordinator	Staff
Cindy Overton	cindy.overton@cptc.edu	eLearning Support Specialist	Staff
Donald Duck	DDuck@gmail.com	Advanced students	Student
Test 1	Test1@gmail.com	Tester	Tester
Test 2	Test2@aol.com	Tester	Tester

Code Snippet

The code snippet below includes the first three rows of the example above, and the text in the rows. The last two rows in the example were created by tabbing, then adjusting the code slightly to make the person's name a link to their email address.

<table class="ic-Table ic-Table--hover-row ic-Table--striped">
<thead>
<tr>
<th>Name</th>
<th>Email address</th>
<th>Title</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Kelley L. Meeusen</a></td>
<td>kelley.meeusen@cptc.edu</td>
<td>eLearning Coordinator</td>
<td>Staff</td>
</tr>
<tr>
<td><a href="#">Cindy Overton</a></td>
<td>cindy.overton@cptc.edu</td>
<td>eLearning Support Specialist</td>
<td>Staff</td>
</tr>
<tr>
<td><a href="#">Donald Duck</a></td>
<td>DDuck@gmail.com</td>
<td>Advanced students</td>
<td>Student</td>
</tr>
</tbody>
</table>
<p> </p>

Anatomy of the Code Snippet

I have chopped this code snippet after the second row of the table to save space on this page.

How to Make This Work

Select and copy the stripped down code below,
Navigate to the Canvas page in which you wish to place a striped table,
Go to Edit mode and switch to the HTE,
Scroll down to where you wish to place the table and press enter a couple times,
Paste the copied code into the editor,
Switch to Rich Content Editor and edit table as desired,
Click Save and test.

Variations on a Theme

In the code snippet below, the following changes have been made:

The column headers have been changed. I took one of the yellow highlighted column headers and changed it to look like this <th>Your Column 1 Header</th>.

To increase the numbers of columns, copy the entire line of code for a column header, and paste it into a blank row following the final column header.
To decrease the number of column, delete one of the lines of code for a column header

Replace the "Your Text Here" with your own text using the Rich Content Editor. I added these as place-holders to identify where to type (the self-expanding) table fields are very small without some kind of text in them.
Use the RCE to make any of the text a hyperlink to any Canvas Content, or even to external web sites. You can also use the RCE to change font size/color and any other features capable in the RCE including inserting video and images.

Stripped Down Code Snippet

The code below will create a table that looks like this one.............

Your Column1 Header	Your Column 2 Header	Your Column 3 Header	Your Column 4 Header
Your Text Here	Your Text Here	Your Text Here	Your Text Here
Your Text Here	Your Text Here	Your Text Here	Your Text Here
Your Text Here	Your Text Here	Your Text Here	Your Text Here

<table class="ic-Table ic-Table--hover-row ic-Table--striped">
<thead>
<tr>
<th>Your Column1 Header</th>
<th>Your Column 2 Header</th>
<th>Your Column 3 Header</th>
<th>Your Column 4 Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Your Text Here</td>
<td>Your Text Here</td>
<td>Your Text Here</td>
<td>Your Text Here</td>
</tr>
<tr>
<td>Your Text Here</td>
<td>Your Text Here</td>
<td>Your Text Here</td>
<td>Your Text Here</td>
</tr>
<tr>
<td>Your Text Here</td>
<td>Your Text Here</td>
<td>Your Text Here</td>
<td>Your Text Here</td>
</tr>
</tbody>
</table>