Tables
Tables in Canvas are created using standard HTML <table> markup. Canvas also provides a set of legacy utility classes (such as ic-Table and ic-Table--striped) that control visual styling. These classes are still supported in this Canvas instance, but are not actively maintained by Instructure and may change in future updates.
You can safely combine these legacy classes with inline CSS to improve readability and accessibility, or use inline CSS alone if you prefer a fully self-contained, modern HTML approach.
Useful references
Default table (Canvas legacy classes)
The base ic-Tableclass applies Canvas' default table styling without stripes or hover effects. This class comes from Canvas' legacy CSS, but is still useful for quickly applying a consistent table style.
| Name | Email address | Section | Role |
|---|---|---|---|
| Alex Rivers | alex.rivers@example.com | Advanced students | Student |
| Jamie Patel | jamie.patel@example.com | Advanced students | Student |
| Morgan Lee | morgan.lee@example.com | Advanced students | Student |
<table class="ic-Table">
<thead>
<tr>
<th>Name</th>
<th>Email address</th>
<th>Section</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex Rivers</td>
<td>alex.rivers@example.com</td>
<td>Advanced students</td>
<td>Student</td>
</tr>
<tr>
<td>Jamie Patel</td>
<td>jamie.patel@example.com</td>
<td>Advanced students</td>
<td>Student</td>
</tr>
<tr>
<td>Morgan Lee</td>
<td>morgan.lee@example.com</td>
<td>Advanced students</td>
<td>Student</td>
</tr>
</tbody>
</table>Striped table (Canvas legacy classes)
Add ic-Table--striped for alternating row stripes and ic-Table--hover-rowto highlight rows on hover. These classes are part of Canvas' legacy utility CSS, but are still available for course content.
| Name | Email address | Section | Role |
|---|---|---|---|
| Alex Rivers | alex.rivers@example.com | Advanced students | Student |
| Jamie Patel | jamie.patel@example.com | Advanced students | Student |
| Morgan Lee | morgan.lee@example.com | Advanced students | Student |
<table class="ic-Table ic-Table--hover-row ic-Table--striped">
<thead>
<tr>
<th>Name</th>
<th>Email address</th>
<th>Section</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex Rivers</td>
<td>alex.rivers@example.com</td>
<td>Advanced students</td>
<td>Student</td>
</tr>
<tr>
<td>Jamie Patel</td>
<td>jamie.patel@example.com</td>
<td>Advanced students</td>
<td>Student</td>
</tr>
<tr>
<td>Morgan Lee</td>
<td>morgan.lee@example.com</td>
<td>Advanced students</td>
<td>Student</td>
</tr>
</tbody>
</table>Condensed striped table (Canvas legacy classes)
Add ic-Table--condensed to reduce vertical spacing. This can be useful when displaying tables with many rows.
| Column A | Column B | Column C |
|---|---|---|
| Row 1, A | Row 1, B | Row 1, C |
| Row 2, A | Row 2, B | Row 2, C |
| Row 3, A | Row 3, B | Row 3, C |
<table class="ic-Table ic-Table--striped ic-Table--hover-row ic-Table--condensed">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, A</td>
<td>Row 1, B</td>
<td>Row 1, C</td>
</tr>
<tr>
<td>Row 2, A</td>
<td>Row 2, B</td>
<td>Row 2, C</td>
</tr>
<tr>
<td>Row 3, A</td>
<td>Row 3, B</td>
<td>Row 3, C</td>
</tr>
</tbody>
</table>Modern accessible table (inline CSS only)
You can also create tables using standard HTML and inline CSS without relying on Canvas' legacy classes. The example below demonstrates a more accessible pattern, including:
- a
<caption>describing the table scope="col"andscope="row"to help screen readers understand headers- clear borders and zebra striping defined with inline CSS
| Week | Topic | Activities |
|---|---|---|
| 1 | Introduction to the module | Welcome video, syllabus quiz |
| 2 | Research basics | Reading task, short discussion post |
| 3 | Literature searching | Video demonstration, practice worksheet |
<table style="border-collapse: collapse; width: 100%; margin-bottom: 1rem; font-size: 0.95rem;">
<caption style="text-align: left; font-weight: bold; padding: 0.5rem 0;">
Example: Module weekly activities
</caption>
<thead>
<tr style="background: #f0f0f0;">
<th scope="col" style="border: 1px solid #ccc; padding: 0.5rem;">Week</th>
<th scope="col" style="border: 1px solid #ccc; padding: 0.5rem;">Topic</th>
<th scope="col" style="border: 1px solid #ccc; padding: 0.5rem;">Activities</th>
</tr>
</thead>
<tbody>
<tr style="background: #ffffff;">
<th scope="row" style="border: 1px solid #ccc; padding: 0.5rem;">1</th>
<td style="border: 1px solid #ccc; padding: 0.5rem;">Introduction to the module</td>
<td style="border: 1px solid #ccc; padding: 0.5rem;">Welcome video, syllabus quiz</td>
</tr>
<tr style="background: #f9f9f9;">
<th scope="row" style="border: 1px solid #ccc; padding: 0.5rem;">2</th>
<td style="border: 1px solid #ccc; padding: 0.5rem;">Research basics</td>
<td style="border: 1px solid #ccc; padding: 0.5rem;">Reading task, short discussion post</td>
</tr>
<tr style="background: #ffffff;">
<th scope="row" style="border: 1px solid #ccc; padding: 0.5rem;">3</th>
<td style="border: 1px solid #ccc; padding: 0.5rem;">Literature searching</td>
<td style="border: 1px solid #ccc; padding: 0.5rem;">Video demonstration, practice worksheet</td>
</tr>
</tbody>
</table>Accessibility notes
Tables should only be used for data that is genuinely tabular (for example, timetables, mark schemes, or comparisons). Avoid using tables purely for layout, as this can create significant barriers for screen reader users and learners on small screens.
For accessible tables:
- Always include a clear heading or
<caption>explaining what the table shows. - Use
<th>for header cells, and addscope="col"for column headers andscope="row"for row headers where appropriate. - Keep table structures as simple as possible. Avoid nested tables or heavily merged cells unless absolutely necessary.
- Do not rely on colour alone to communicate meaning within a table — include text labels or symbols as well.