How to Create Striped Tables

Tables can be a great way to display data visually. The code included below will make tables with stripes and with a color-changing "hover." Both of these can also be combined into a table that includes both effects. 

However, tables have some specific accessibility requirements in order for a screen reader to read them. The accessibility checker can help you add a caption and note a header row or column as needed.   

In this case, you want to start by creating a table using the Canvas Table Tool. Once you have the table, switch to the HTML editor. 

You will see a line of code that looks like: 

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

You need to replace that line with one of the lines below.

If you need a refresh on using the table tool and/or tables and accessibility, take a look at this video. 

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

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

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

The color for this effect for these features appears to be limited by Canvas.  

Practice

• Open a blank content page and add a table using the Canvas table tool. 
• Copy the code included above for one of the table types. 
• Open the HTML editor and find the string of code that looks similar to this: 

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

• Replace that string of code with one of the options above. 
• Click save and check out your new table (the new table effects will not render in edit view). 
• Add the sample code to the note page app on your computer or a reference page on Canvas. You can copy/paste the sample code anytime you need it.