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

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

Jump to solution

I have created a table for my Home page with links to units and other material.  From the Home page, the entire table doesn't show and I have to scroll to the right to get to all links.  If I am on Pages, viewing the page, the entire table shows.  How can I get the table to resize as needed? 

I do not have this problem with the header I created in PowerPoint; it resizes if I am on the Home page or on Pages. 

1 Solution

Accepted Solutions

Mine is doing the exact same thing as mentioned above.  I am trying to find a solution.  I thing it has something to do with the formatting of the outside of the table vs. the columns of the inside.  The inside columns are measured by px and the outside is by percentage on mine...

View solution in original post

0 Kudos
33 Replies
chofer
Community Coach
Community Coach

Hi  @carey_karle ​...

I tried to re-create the scenario that you've described, but I was unable to replicate it.  What I did was make a new page in my sandbox course.  Then, I inserted a 3x3 table on the page and filled each of the nine cells with text.  (I didn't create hyperlinks for my example, but that shouldn't matter.)  Then, I saved the page.  Next, I set this page as my "Front Page".  When I viewed the "Home" page, I saw my table appear ... no horizontal scrolling needed.  I am using the Google Chrome (v. 51) browser.

My thought is that maybe the HTML code behind your page for the table is telling it to right-align to the page?  Still, if that were the case, you shouldn't have to scroll way to the right ... unless maybe your screen resolution is large.

Is there a way you could maybe attach a file with the HTML code for the page so we could help troubleshoot the issue with the table?

Mine is doing the exact same thing as mentioned above.  I am trying to find a solution.  I thing it has something to do with the formatting of the outside of the table vs. the columns of the inside.  The inside columns are measured by px and the outside is by percentage on mine...

View solution in original post

0 Kudos
Stefanie
Community Team
Community Team

 @carey_karle ​, it's been a few weeks since you posted. Did the response from  @chofer  resolve your issue? Were you able to find a different solution? For now, I will mark this question as "Assumed Answered"; however it will not prevent you or others from responding. If you feel Chris's answer represents a workable solution, please mark his answer as "Correct"--and if not, please provide the additional information he requested so we can continue to work with you on this  Thanks!

richard_mellor
Surveyor

I am having this exact same problem with a table on my home page.  When the page is viewed from Pages, everything auto-formats correctly, but when viewed as the Home page, the table does not automatically adjust to the new width.  There is a shorter page width due to the Home page's "coming up" column on the right.  An image at the top of the page and all text adjusts to the new width just fine, but the table of image links does not.  It is too wide, and my students need to scroll to the right to view it all.  

What's even more frustrating, I have copy/pasted the html exactly as it is onto the Syllabus page and set that as the Home page.  When the table is copy/pasted onto the syllabus page, it DOES automatically format itself to fit the narrower Home page space.  Unfortunately, the Syllabus page displays a long list of assignments at the bottom in alphabetical order that I don't want to display, and there is no way yet to disable that assignment list on the course syllabus page.  

I am left with the choice between having my students scroll sideways to view the links, or have it formatted correctly as a Syllabus but with a long and unnecessary assignment list.  

There's got to be a fix for one of these two problems.  Please help someone.  It's annoying.  Since the same html works correctly as a Syllabus page, but not as a regular Page, I suspect it may be some problem with the style sheet? 

Correct formatting as a Page:

222975_Screen Shot 2017-03-21 at 12.20.30 PM.png

Incorrectly formatted table as a Home page:

222976_Screen Shot 2017-03-21 at 12.20.54 PM.png

Correct formatting as a Syllabus, but unusable to me due to the assignment list at the bottom:

223139_Screen Shot 2017-03-21 at 12.23.15 PM.png

Hi  @richard_mellor 

What is happening is not your table per say, but rather the images in your table. Your images have a fixed size, and so does your table, but Canvas tables will resize to fit the fixed-size images.

You will need to go into your HTML Editor, and change the width of your image from a set pixel width to a percentage of the  cells they are in width. I have also found it very useful to set the width of my table to be a percentage also, then they always take up the same amount of space regardless of the width of their frame (Page, screen, whatever).

In the image below, the three navigation links are set in a one-row, three column table.

223148_pastedImage_2.png

The table width is set at 100%, each cell of the table is set at 33%, and the row borders is set a "1" which eats up that final 1% of width. In pages, this table will take up 100% of the width, as the home page it will take up 100% of the width, on a mobile device it will take up 100% of the width.

When you create a table in Canvas using the RCE it automatically sets the size in pixels, but you can open Table Properties and convert the width to a percentage. The images you are using as buttons are also automatically sized in pixels, but you can set them as a percentage of the cell width using HTML.

The annotated HTML snippet below is for navigation buttons set in a table. It is a vertical array  of several rows and two columns instead of a horizontal array, but I could not find a quick example for you. Substitute "picture" for "button", and you will see what I mean.

223149_pastedImage_3.png

Below is how this will look - on a 24 inch monitor, on an iPad, as a content page, as a home page.................

223150_pastedImage_4.png

I hope this helps,

KLM

Yups... this solved my problem.  I set the table to be 95% of my overall page width, then set each of my 3 boxes on each row at 33%, then set each image in each box to 99% of the box... BOOM!  Perfect formatting across devices.   Thanks!

Here's my new html:

<p style="text-align: center;"><img src="https://canyons.instructure.com/courses/1104162/files/60823982/preview" alt="6_Petra.jpg" width="1000" height="315" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823982" data-api-returntype="File" /><br /><br /> <span style="font-size: 24pt; color: #008000;"><span style="font-family: inherit; line-height: 40px;">Welcome to 6th Grade Social Studies!</span></span>   </p>
<div class="padding type2">
<p class="p3 style1"><span style="font-size: 12pt;">Welcome everyone!  I&rsquo;m Mr. Richard Mellor and I'll be your Social Studies teacher for the year.  Social Studies is my favorite subject, and by the end of the year, it just may be your favorite subject too.</span></p>
<p class="p3 style1"><span style="font-size: 12pt;">In 6th grade Social Studies, we&rsquo;ll be learning about all of world history.  We&rsquo;ll start with Paleolithic hunters and gatherers and move all the way to modern day current events.</span></p>
<p class="p3 style1"><span style="font-size: 12pt;">We&rsquo;ll be studying Mesopotamia, Egypt, Greece, Rome, China, Africa, the Americas, India, and World Religions before our winter break.  In January we&rsquo;ll pick up where we left off: the Middle Ages, Renaissance, Imperialism, Revolutions, Industrialism, the 20th Century, and the Modern World.</span></p>
<p class="p3 style1"><span style="font-size: 12pt;">Feel free to contact me anytime throughout the year with questions, comments, or concerns.  The easiest and quickest way to get a prompt reply is to contact me email at <a href="mailto:richard.mellor@canyonsdistrict.org">richard.mellor@canyonsdistrict.org</a><a href="mailto:richard.mellor@canyonsdistrict.org"></a></span></p>
<p class="p3 style1"><span style="font-size: 12pt;">You can access our course content either through this Canvas course or at my class website: <a href="http://mrmellor.com">mrmellor.com</a></span></p>
<br />
<table style="height: 876px; margin-left: auto; margin-right: auto;" width="95%">
<tbody>
<tr>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823865/preview" alt="01.png" width="99%" height="224" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823865" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823858/preview" alt="02.png" width="99%" height="225" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823858" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823866/preview" alt="03.png" width="99%" height="223" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823866" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823871/preview" alt="04.png" width="99%" height="222" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823871" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823862/preview" alt="05.png" width="99%" height="221" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823862" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823860/preview" alt="06.png" width="99%" height="222" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823860" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823864/preview" alt="07.png" width="99%" height="223" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823864" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823857/preview" alt="08.png" width="99%" height="223" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823857" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823872/preview" alt="09.png" width="99%" height="220" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823872" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823873/preview" alt="10.png" width="99%" height="222" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823873" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823874/preview" alt="11.png" width="99%" height="219" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823874" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823868/preview" alt="12.png" width="99%" height="221" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823868" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823859/preview" alt="13.png" width="99%" height="223" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823859" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823870/preview" alt="14.png" width="99%" height="221" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823870" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823861/preview" alt="15.png" width="99%" height="219" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823861" data-api-returntype="File" /></td>
</tr>
<tr>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823863/preview" alt="16.png" width="99%" height="223" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823863" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823869/preview" alt="17.png" width="99%" height="222" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823869" data-api-returntype="File" /></td>
<td style="width: 33%;"><img src="https://canyons.instructure.com/courses/1104162/files/60823867/preview" alt="18.png" width="99%" height="219" data-api-endpoint="https://canyons.instructure.com/api/v1/courses/1104162/files/60823867" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>
</div>
<div class="grid_8"></div>
<div class="container_24">
<div class="wrapper">
<div class="grid_5">
<div class="aligncenter"> </div>
</div>
</div>
</div>

Hi  @richard_mellor  and thank you for the thank you!

Please also consider what the awesome  @James ‌ pointed out above. Tables are not always the best solution. However they can be made accessible with some tweeking, but they still do not play as well as we would like on all devices.

On accessibility:

  • You are using images as navigation buttons, so you need to title them as a navigation link in your code, and I have always found it better to include a textual navigation link just below the image.
  • If you are using buttons from the Canvas Styleguide, screen-reading tech will identify them as a navigation item to the user.
  • Always include a header row in any table, even one used simply as a formatting tool - part of the reason they aren't recommended as formatting tools.
  • When using a table for formatting, keep in mind that screen-reading tech reads tables left-to-right top-to-bottom, and this should inform how you add content to a table. In other words, if you are adding module navigation buttons you would want to number the top row 1, 2, 3; then the second row 4, 5, 6, etc.

I hope this helps. I have more but I have to run to a meeting.

KLM

I'm going to pile onto this one,  @richard_mellor ‌: to get started with building a beautiful home page without tables, check out  @clong ‌'s https://community.canvaslms.com/groups/designers/blog/2015/05/22/sweet-home-pages-without-tables?sr=...‌.

 @kmeeusen   Great idea and explanation!  We have had a lot of staff members in our district with this issue.  Definitely makes sense to use the % instead of pixels.  Now the fun part is training them how to do this.  If only everyone understood a little bit of HTML.  🙂