cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

How do I get the background of my table to alternate colors between rows.

Jump to solution

I currently have a table on my homepage of canvas and all of the rows are solid white. I would like to make every other row a light grey so that it is easier to read down the table. Is this possible?

1 Solution

Accepted Solutions
Highlighted
Navigator

Hello bje566@utexas.edu Welcome to the Canvas Community.  Thanks for posting your question.  This might not be the solution you are looking for exactly, but I'll provide it here for you and others just in case.  It may require a bit of HTML knowledge.

<table class="ic-Table ic-Table--hover-row">
<thead>
<tr>
<th>Name</th>
<th>Email address</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Ella Mentry</a></td>
<td>ella.mentry@gmail.com</td>
<td>Las Vegas</td>
<td>Nevada</td>
</tr>
<tr>
<td><a href="#">Joe King</a></td>
<td>joe.king@gmail.com</td>
<td>Houston</td>
<td>Texas</td>
</tr>
</tbody>
</table>

In this example, it's making a table where if you hover your mouse over a row, it will highlight the row for you.  Now, I'm not sure how long this code may or may not work in Canvas...as it might be part of what Instructure will be depreciating over the next year or two.  The end result, however, looks something like this:

Table

When you hover over a row, it highlights in a light blue color.

Otherwise, if you wanted a table that looks like this:

Table Example 2

... you could use HTML code similar to the following:

<table style="width: 100%;" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td style="background-color: #070a47;">
<h2><span style="color: #ffffff;">Heading 1</span></h2>
</td>
<td style="background-color: #070a47;">
<h2><span style="color: #ffffff;">Heading 2</span></h2>
</td>
<td style="background-color: #070a47;">
<h2><span style="color: #ffffff;">Heading 3</span></h2>
</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data A</td>
<td>Data a</td>
</tr>
<tr>
<td style="background-color: #eeeeee;">Data 2</td>
<td style="background-color: #eeeeee;">Data B</td>
<td style="background-color: #eeeeee;">Data b</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data C</td>
<td>Data c</td>
</tr>
<tr>
<td style="background-color: #eeeeee;">Data 4</td>
<td style="background-color: #eeeeee;">Data D</td>
<td style="background-color: #eeeeee;">Data d</td>
</tr>
</tbody>
</table>

Much of what you see above in this code is customizable...including the hex colors I've chosen, the cellspacing, and the cellpadding.

Finally, you can also read more about inserting tables via the RCE (Rich Content Editor) here: How do I insert a table using the Rich Content Editor as an instructor?.  You can do a lot of table modifications just using the table tool in the RCE...so if you are uncomfortable with editing HTML, try using the tools that Canvas provides first.

I hope this will help, Brooke.

View solution in original post

1 Reply
Highlighted
Navigator

Hello bje566@utexas.edu Welcome to the Canvas Community.  Thanks for posting your question.  This might not be the solution you are looking for exactly, but I'll provide it here for you and others just in case.  It may require a bit of HTML knowledge.

<table class="ic-Table ic-Table--hover-row">
<thead>
<tr>
<th>Name</th>
<th>Email address</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Ella Mentry</a></td>
<td>ella.mentry@gmail.com</td>
<td>Las Vegas</td>
<td>Nevada</td>
</tr>
<tr>
<td><a href="#">Joe King</a></td>
<td>joe.king@gmail.com</td>
<td>Houston</td>
<td>Texas</td>
</tr>
</tbody>
</table>

In this example, it's making a table where if you hover your mouse over a row, it will highlight the row for you.  Now, I'm not sure how long this code may or may not work in Canvas...as it might be part of what Instructure will be depreciating over the next year or two.  The end result, however, looks something like this:

Table

When you hover over a row, it highlights in a light blue color.

Otherwise, if you wanted a table that looks like this:

Table Example 2

... you could use HTML code similar to the following:

<table style="width: 100%;" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td style="background-color: #070a47;">
<h2><span style="color: #ffffff;">Heading 1</span></h2>
</td>
<td style="background-color: #070a47;">
<h2><span style="color: #ffffff;">Heading 2</span></h2>
</td>
<td style="background-color: #070a47;">
<h2><span style="color: #ffffff;">Heading 3</span></h2>
</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data A</td>
<td>Data a</td>
</tr>
<tr>
<td style="background-color: #eeeeee;">Data 2</td>
<td style="background-color: #eeeeee;">Data B</td>
<td style="background-color: #eeeeee;">Data b</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data C</td>
<td>Data c</td>
</tr>
<tr>
<td style="background-color: #eeeeee;">Data 4</td>
<td style="background-color: #eeeeee;">Data D</td>
<td style="background-color: #eeeeee;">Data d</td>
</tr>
</tbody>
</table>

Much of what you see above in this code is customizable...including the hex colors I've chosen, the cellspacing, and the cellpadding.

Finally, you can also read more about inserting tables via the RCE (Rich Content Editor) here: How do I insert a table using the Rich Content Editor as an instructor?.  You can do a lot of table modifications just using the table tool in the RCE...so if you are uncomfortable with editing HTML, try using the tools that Canvas provides first.

I hope this will help, Brooke.

View solution in original post