Tables

Tables are a great way to visually organize information. Sometimes a standard table just doesn't cut it. In this case, you can add a more professional table using .html. Using these codes will make your information look similar to the great tables you see in the "People" or "Grades" sections of Canvas. You can even add a hover feature that highlights the row that you're looking at. 

Take a look at the code below to add it through your HTML Editor for a basic table. If you'd like to add more advanced features or for additional help, check out the Canvas Style Guide Links to an external site..

 

Name	Email address	Section	Role
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student
Paul Howard	paulhowardemail@gmail.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><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
    <tr>
      <td><a href="#">Paul Howard</a></td>
      <td>paulhowardemail@gmail.com</td>
      <td>Advanced students</td>
      <td>Student</td>
    </tr>
  </tbody>
</table>

Examples

 

Hover Option

 

Name	Email address	Section	Role
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student

 

Hover and Striped Option

 

Name	Email address	Section	Role
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student

 

Multiple Color Options

Name	Email address	Section	Role
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student
Paul Howard	paulhowardemail@gmail.com	Advanced students	Student