Table on Canvas Homepage

[LMEcolleen]

Why does my table not keep the same format once my page is published?

Pictures are set up and then once page is published.

[TrishaMeyer1 · Accepted solution]

Hi @LMEcolleen ,

Canvas automatically adjusts its pages to be optimized for different viewing platforms (Chromebook vs large screen vs phone). It's a futile endeavor to try to make your page look a certain way based on the space you see on the screen.

Another consideration: Using tables for alignment does not meet accessibility standards. Tables are intended to display data and are not meant to be used for page design.

You can read more about accessibility in this Instructure blog post:

Accessibility in Online Course Design

[chriscas]

Hi @LMEcolleen,

Without seeing your exact HTML code, I am going to make a pretty educated guess that the issue is that of available screen space.  Unlike making a word document (or similar) where there is a fixed paper size and everything will basically look the same no matter what computer you view the file on, web content is generally dynamic and changes based on the size of the screen.  This generally ensures people with large monitors see a lot fo content (without much blank space) and conversely that people viewing on a small mobile device only see a small amount of content and don't have a ton of left/right and up/down scrolling, which can be very difficult to accomplish.

I can see the look you're going for, but I think getting that to work well across devices might be pretty difficult.  If you put your menu icons above the calendar instead of trying to have them side by side, it might work a little bit better.  I'm not sure how much you want to display "identically to everyone and how much you'd be willing to have display slightly differently to different users though.

If you can provide a bit more info on your wishes, someone may be able to offer up some possible solutions.

-Chris

[LMEcolleen]

Thank you.  Per our building we need to have the buttons available.  I get what you are saying about the different screens.  The two pics I included were both on my device (same screen size) which is why I was confused.  Thanks for the input!

[chriscas]

Hi @LMEcolleen,

Just to add one more piece of clarity, as you've experienced, even using the same device sizes can vary...  Your first screenshot looks t be while building the page.  In that mode, there is no righthand column, so the editor window is wider than what the content area will be once the page is saved and viewed with the right hand column next to it.  It's all super complex, and @TrishaMeyer1 does bring up a good point about accessibility concerns of pages developed with tabled (but I will admit I have always found tables much easier to build than the more accessibility-friendly but complex world of HTML divs, spans, positioning, etc).

-Chris