cancel
Showing results for 
Search instead for 
Did you mean: 
Community Member

How do I format a table to get it to resize as needed?

Jump to solution

I want it to be seen on the home page, but right not it is huge and has to be scrolled across.  I tried doing advance with 50% H and 50% W, but I have the same result.

1 Solution

Accepted Solutions

Thank you!  I ended up coping a table (HTML code) form  a Canvas Commons page.  It tinkered around with the size of the photos and got it to work.  Wish it was easier though,  Thank you for helping!

View solution in original post

3 Replies
Community Coach
Community Coach

angela.owarzani@bristoltwpsd.org, greetings! I'm not sure of the answer to this question, but I'm sharing it with the Instructional Designers‌ group in the Community to see if they can help. 

Kona

Community Coach
Community Coach

Hello there, angela.owarzani@bristoltwpsd.org Thank You for posting your question.  Without seeing what your table looks like inside of your course (because the vast majority of Canvas Community users don't have access to your school's Canvas environment or your course in question), it's a bit hard to know exactly what is going on with your table.  However, based on what you've stated, it sounds like your table is possibly going off the screen causing you to scroll horizontally left/right.  If this is the case, your table probably has one of two things going on...

  • The table is larger than 100% of the screen.
  • The table size is being defined in pixels wide ... more pixels than the max available for inside of a Canvas page.

Check out the information in this website: HTML Tables.  When you were looking at the advanced properties for your table, were you setting the cells to 50% for your height and width?  If so, those properties are different than setting the overall width of your table.  This Guide should also be of help: How do I insert a table using the Rich Content Editor as an instructor?  Here's an example of a table I made with three rows and four columns.  Each column is 25% for a width, and the overall table size takes up 75% of the page width.

table

And here is what the code for the above table looks like:

<table style="width: 75%; border-collapse: collapse;" border="1">
<tbody>
<tr>
<td style="width: 25%;">COLUMN 1 DATA</td>
<td style="width: 25%;">COLUMN 2 DATA</td>
<td style="width: 25%;">COLUMN 3 DATA</td>
<td style="width: 25%;">COLUMN 4 DATA</td>
</tr>
<tr>
<td style="width: 25%;">red</td>
<td style="width: 25%;">green</td>
<td style="width: 25%;">purple</td>
<td style="width: 25%;">brown</td>
</tr>
<tr>
<td style="width: 25%;">blue</td>
<td style="width: 25%;">orange</td>
<td style="width: 25%;">yellow</td>
<td style="width: 25%;">black</td>
</tr>
</tbody>
</table>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I hope this helps a bit Angela.

Thank you!  I ended up coping a table (HTML code) form  a Canvas Commons page.  It tinkered around with the size of the photos and got it to work.  Wish it was easier though,  Thank you for helping!

View solution in original post