Hover-Row Background Color Options Table

Canvas Tables are not particularly friendly, and not at all interesting. The multi-colored table example below is a nice option. The reason that this is in our Advanced module is because you will need to return to the HTML Editor to change the colors for each additional row you add.

 

Name	Email address	Section	Role
Kelley Meeusen	kelley.meeusen@cptc.edu	eLearning Coordinator	Staff
Cindy Overton	cindy.overton@cptc.edu	eLearning Support Specialist	Staff
Donald Duck	DDuck@gmail.com	Remedial students	Student
Next row	created by tabbing in RCE	and changing color in HTE	Test

 

Code Snippet

<table class="ic-Table ic-Table--hover-row">
<thead>
<tr class="ic-Table__row--bg-neutral">
<th>Name</th>
<th>Email address</th>
<th>Section</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr class="ic-Table__row--bg-success">
<td><a href="#">Kelley Meeusen</a></td>
<td>kelley.meeusen@cptc.edu</td>
<td>eLearning Coordinator</td>
<td>Staff</td>
</tr>
<tr class="ic-Table__row--bg-alert">
<td><a href="#">Cindy Overton</a></td>
<td>cindy.overton@cptc.edu</td>
<td>eLearning Support Specialist</td>
<td>Staff</td>
</tr>
<tr class="ic-Table__row--bg-danger">
<td><a href="#">Donald Duck</a></td>
<td>DDuck@gmail.com</td>
<td>Remedial students</td>
<td>Student</td>
</tr>
</tbody>
</table>