Basic HTML Tables

Today we are going to talk about tables.  There are many ways to put a table in Canvas, and there are many creative uses for tables on our content pages.  We'll begin with the very basics, which is how to insert, format, and modify a table using the Table Creator feature on the Canvas Rich Content Editor.  To do this, open the Table icon and click your cursor on the grid to determine your dimensions of the table.  After you have chosen your dimensions, you can still modify then on the content page.

 
How to create a table in the RCE.gif
 
modifying a table.gif
 

Once your table is created, you can use the table properties option to further edit the specifications.  To do this, place your mouse cursor anywhere on the table and select the Table properties option from the dropdown.

Below are the various options and general properties that you can adjust on your table.  You can learn more about tables in Canvas here: https://community.canvaslms.com/docs/DOC-12912-415241504.

 
 

General Properties

  • Width: The width of your table (in pixels or percent, e.g. 500px, 50%). Note that the table width may be adjusted manually by selecting the table until the adjustment handles appear around the perimeter of the table, then clicking and dragging the handles to adjust the size.    
  • Height: The height of your table (in pixels or percent, e.g. 500px, 50%). Note that the table height may be adjusted manually by selecting the table until the adjustment handles appear around the perimeter of the table, then clicking and dragging the handles to adjust the size.  
  • Cell Spacing: The space between individual cells as well as cells and table borders (in pixels, e.g. 3px). 
  • Cell Padding: The space between the cell border and its content (in pixels, e.g. 5px).   
  • Border: The thickness of your table border (in pixels, e.g. 5px).
  • Caption: The table label is displayed on top of the table.  
  • Alignment: The location of your table on the page.

Advanced Properties

  • Style: The style of your table. You can add custom CSS styling to your table such as colors, borders, spacing, and alignment.
  • Border Color: The color of your table border. You can either type in the hexadecimal RGB number for the color you want (in #nnnnnn format) or type in basic colors (red, pink, cyan, blue, green, yellow, brown, black, etc.)
  • Background Color: The color of your table background. You can either type in hexadecimal RGB number for the color you want (in #nnnnnn format), or type in basic colors (red, pink, cyan, blue, green, yellow, brown, black, etc.) 

HTML Tables

The Rich Content Editor is a great introduction to tables, but it only provides a fundamental structure for your table.  If you want to further customize unique aspects of your table, then you likely will benefit from exploring HTML.  In HTML format, the code for a basic table will require defining the start and end of a table <table>, as well as the table row <tr> and the individual cells <td> (table cells are called table definitions in HTML).  Below is the code for a 2x2 table.  Feel free to modify the content in the individual cells and click Run Code.  [tip: refresh the screen if you want to reset the table HTML content]

 
Code
Output

 

That code would give you a 2x2 table.  If you wanted to add another row, then add the following code below the second row in the code:

<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>

If you wanted to add another column, then you would add: <td>row X, cell 3</td> to each row (of course, replace the cell content with your own content).  Or in this case it would likely be easier to use the Rich Content Editor.  Below are several examples of what the HTML would looke like for various table dimensions.  Feel free to play with the code and modify the table dimensions through the code.  Note that on the last example, the border is set to 3 pixels.  Modify that value and see how it renders.  How does one pixel differ from 3 pixels, and what does a width of 15 pixels look like?  If you do not want any border, then either write it <table border="0"> or simply <table>. 

One column:

100

One row and three columns:

100 200 300

Two rows and three columns:

100 200 300
400 500 600

A basic note about html is that every time you open a tag, you must close it. So every <table> needs a </table>, and every <td> needs a closing </td>. Thus you need to keep track of all your <tr></tr>'s and <td></td>'s. 

Now to add a little more to the tables, it is really easy to include captions and headers. Headers are similar to putting <b>bold</b> within the cells, but is a more proper and much cleaner way to do so. You can assign any cell to be a header cell, but for continuity they are typically either vertically or horizontally aligned. Here are some examples of captions and headers:

Monthly savings
Month Savings
January $100
February $50



Balance Sheets
  Revenue Profit
First Quarter $100m $21m
Second Quarter $90m $17m
Third Quarter $95m $18m

Now suppose you want a cell that spans more than one column or more than one cell. You would define that within the cell by using the following tag: colspan="[the number of cells it should span]". A quick example below:

Cell that spans two columns:

Name Telephone
Professor Awesome cell: 555 77 854 office:555 77 855

Cell that spans two rows:

Name: Professor Awesome
Telephone: cell: 555 77 854
office:555 77 855

If you would like to include cell padding (which I almost always do), then you can include that information within the <table> tag. Cell padding is basically like putting space between the content of the cell and the border or wall of the cell. Some examples below:

Without cellpadding:

First Row
Second Row

With cellpadding:

First Row
Second Row

With lots of cellpadding:

First Row
Second Row

One final attribute I will cover in this blog post is defining widths and heights for tables or cells. There are two different ways to define the the attributes for the width or height. You can either specify pixels or percentages.  

Value Description
pixels Sets the width in pixels (example: width="50")
% Sets the width in percent of the surrounding element (example: width="50%")

In case you are wondering what the code for the above table looks like:

This may seem like a lot of information, but with a little dedication and practice, styling tables in HTML can be easy.  Many times the Rich Content Editor is sufficient, but learning the fundamentals of HTML will give you the freedom to customize your tables.  You can further empower your coding skills by researching online to find tips and advice.  Some good starting points would be:

https://www.w3schools.com/html/html_tables.asp
http://divtable.com/generator/
https://www.quackit.com/html/html_table_generator.cfm
http://www.rapidtables.com/web/tools/html-table-generator.htm
 

Written by Dr. Sean Nufer, Director of Ed Tech for TCS Education System.