How to Style a Table in Canvas [BONUS]

If you'd like to know more about how to make tables in Canvas look attractive and easy to use, you're in the right place! This bonus content is not directly relevant for accessibility, though nicely styled tables can help sighted users more quickly and easy navigate data.

Canvas hides most of the ways to style tables behind multiple clicks, so if you don't know web code, it can seem like making anything other than the standard tables is impossible. Thankfully, you just need to know where to look.

You can style an entire table by selecting Table Properties. Table Properties is located at the left end of the bar that appears above the table when your cursor is in the table, as well as in the Table tool dropdown .

Once you are in Table Properties, select Advanced to see controls for styling. Here you'll see options to change the border style (e.g., dotted vs. solid), the border color, and the background color of the entire table.

Changing the background color will change it for the entire table. Changing the border, however, only controls the edge borders of the table. To control internal borders, you'll need to change the styles on the appropriate cells, rows, or columns. We'll cover that in the next section.

To change individual cells, rows, or columns, you'll need to select what you want to style in the table. Then, select the Table tool dropdown , select Cell, Row, or Column (whichever is appropriate), and select Cell properties, Row properties or Column properties.

Just as with the Table properties, select Advanced to see controls for the cell, row, or column styles.

Let's say you wanted to style a table like the one on the How to Write Accessible Alt Text page in this course.

First, you would create the table using the Table tool . This would have the default styles, including white background for all cells and 1 pixel solid black border for everything.

Context	Alt Text
Page about Midwest colleges	Ball State University campus
Page about colleges going remote during the pandemic	Ball State University campus with empty roads and sidewalks
Page about beautification efforts on Ball State's campus	McKinley Avenue with flower planters in median

Then, we'll set the background color on the top row to Ball State brand color Links to an external site. red (#BA0C2F) and the background color on the third row to Ball State light gray (#F2F2F2). Do this by selecting the row, opening the Table tool dropdown , selecting Row, then Row properties. Select Advanced and change the background color to a custom color. To help with color contrast, change the top row to white . You can also bold and center align the top row text.

The light gray background color is applied to the third row as part of a style called "striped" tables. In striped tables, every other row changes background color between two options (usually white vs. light gray) to help sighted users better distinguish each row. They are particularly recommended when you remove/change border styles, as we will be doing with this table.

Context	Alt Text
Page about Midwest colleges	Ball State University campus
Page about colleges going remote during the pandemic	Ball State University campus with empty roads and sidewalks
Page about beautification efforts on Ball State's campus	McKinley Avenue with flower planters in median

Next, we'll remove all the borders from the table. This requires two steps: removing the borders for the entire table and removing them for the individual cells. Select the table and select Table properties from the bar that appears. Under Advanced, change the Border style option to "None". This will remove the edge borders of the table. Then, select all cells in the entire table and go to the Table tool dropdown , Cell, Cell properties. Under Advanced, change the Border style option to "None". This will remove the internal borders of the table.

Context	Alt Text
Page about Midwest colleges	Ball State University campus
Page about colleges going remote during the pandemic	Ball State University campus with empty roads and sidewalks
Page about beautification efforts on Ball State's campus	McKinley Avenue with flower planters in median

You can stop here if you want. The remaining step does require changing some code, as the options in the Table tool dropdown don't allow you to add small borders to each row. To do this, select the HTML editor from the bottom-right of the Rich Content Editor . Using the search function on your browser (Ctrl+F or Cmd+F in most browsers), search for "tr" (without the quotation marks). This will locate all of the table rows (indicated by the opening of a tag, "<tr"). Near each tr tag, you will see style=" followed by some styles, such as height and/or background-color.

Before the closing quotation mark (") following style=", copy and paste the following:

border-top: 1px solid black; border-bottom: 1px solid black;

Switch back over to the visual side by selecting the HTML button again. If you did this correctly, you will see a 1 pixel black border at the top and bottom of the row you changed. Now, switch back to HTML and repeat this change to every tr tag.

Context	Alt Text
Page about Midwest colleges	Ball State University campus
Page about colleges going remote during the pandemic	Ball State University campus with empty roads and sidewalks
Page about beautification efforts on Ball State's campus	McKinley Avenue with flower planters in median