Striped Table

Here is a simple way to make an accessible table with a clearly marked header row. An additional feature of this table is that the row is highlighted when student hover over it. 

Column 1	Column 2	Column 3
Text goes here	Text goes here	Text goes here
Text goes here	Text goes here	Text goes here
Text goes here	Text goes here	Text goes here

Instructions

To insert a striped table into your page:

1. Open the RCE and toggle to the HTML editor;
2. Copy the code (below) and paste it into the HTML editor where you want the table to be in your text;
3. Toggle back to the RCE;
4. Highlight the placeholder text and replace with your table data;
5. Save your page.

Code

This code is for a 3 column table with a header and three additional content rows.

<table class="ic-Table ic-Table--hover-row ic-Table--striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>
<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>
<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>
</tbody>
</table>

 

Though you can use the table edit function from with the RCE toolbar to add columns and rows to tables within Canvas, this approach does not work well with styled tables. Instead, add columns within the HTML. This is a two step process. 

Step 1: Add an additional column to the header row 

Here is just a snippet of the first few lines of code for the striped table. We want you to note that these lines pertain to the table header <thead>, and each column in that row is noted by <th>:

<table class="ic-Table ic-Table--hover-row ic-Table--striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text goes here</td>

To add another column, we're going to add another line of code: <th>Header 4</th> directly under <th>Header 3</th>. The new code will look like this:

<table class="ic-Table ic-Table--hover-row ic-Table--striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text goes here</td>

Step 2: Add additional columns to the rest of the rows

To maintain your formatting, you now need to add an additional column to all the rows. The code for a single row with three columns looks like this:

<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>

To add one more column, you simply add in one more <td>Text goes here</td>

<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>

The additional column must be added to each row in your table.