Columns Without Tables: code-snippet

[G_Petruzella]

Tables - I really don't like them. I find them unwieldy to manipulate and style, plus they're really not accessibility-friendly as commonly employed. But they've always seemed the only way to solve certain visual alignment problems: for example, creating three aligned columns. I've only recently realized that I don't need a table to create columns! Huzzah!

The key to columns... is the <div> tag.

Example: I want the "header" of my Syllabus page to contain some contact info, divided into two columns, with a 3rd column for a right-aligned graphic. I start just by typing out the fields and inserting the image, so they're stacked vertically:

<p><strong>Instructor:</strong></p>

<p><strong>Class Location:</strong></p>

<p><strong>Class Meeting Times:</strong></p>

<p><strong>Contact Information:</strong></p>

<p><strong>Office Location:</strong></p>

<p><strong>Office Hours:</strong></p>

<img style="float: right;" src="/courses/372229/files/66518610/preview" alt="FYE 2015 logo" width="60%" data-api-endpoint="https://mcla.instructure.com/api/v1/files/66518610" data-api-returntype="File" />

But now, I 'frame' each chunk of content with its own <div>, setting the float attribute so they'll run side-by-side when possible, and setting the width attribute to get the relative sizes I want, as follows:

<div style="float: left; width: 35%;">

<p><strong>Instructor:</strong></p>

<p><strong>Class Location:</strong></p>

<p><strong>Class Meeting Times:</strong></p>

</div>

<div style="float: left; width: 35%;">

<p><strong>Contact Information:</strong></p>

<p><strong>Office Location:</strong></p>

<p><strong>Office Hours:</strong></p>

</div>

<div style="float: right; width: 30%;"><img style="float: right;" src="/courses/372229/files/66518610/preview" alt="FYE 2015 logo" width="60%" data-api-endpoint="https://mcla.instructure.com/api/v1/files/66518610" data-api-returntype="File" /></div>

It looks like the screenshots below. (**EDIT 04/24/15: added screenshots from Android tablet, both Canvas App and mobile browser. HT Deactivated user​.)

**EDIT 04/27/15: added screenshots (below) from Android phone, both Canvas App and mobile browser (Firefox). Note that the browser view on a phone does reduce text size within <div>s significantly.

[rkirkland]

This is great! I have also been using tables to create columnar content, but I will definitely give this a try!

[c_t_coltman]

I shall be using this too instead of usig tables - so thank you.

[jordan]

Great stuff as always Gerol!  You ought to throw in a couple screenshots of how this looks on

1. a tablet mobile browser
2. a phone mobile browser
3. a tablet Canvas app
4. a phone Canvas app

[G_Petruzella]

Good point Deactivated user​ - I'll edit the doc when I've grabbed a few of the mobile screenshots.

[jordan]

Nice!  I wanted to see how it scales and it seems to do so marvelously. How about on a phone!? 😉

[scottdennis]

Pretty cool, Gerol!

[G_Petruzella]

Deactivated user​, Android phone screenshots added, both mobile browser and app! You'll note that the phone/browser combination does reduce text to minuscule levels, which could be a problem for that particular use case. But otherwise it scales well.

[jordan]

Thank you for adding those shots! I was hoping it would wrap to the next level or something like some responsive websites will do. Always have to consider how things appear on mobile devices.

[john_morris]

 @G_Petruzella ​, how does this work with screen readers? I know tables create problems on different platforms, but are there any accessibility issues to be aware of using columns?

[MattHanes]

Another trick I have been using is to use the Canvas Style Guide to see what html styling options I have available.  If you're good at the HTML editing, you can use their implementation of Flexbox Grid to put things into columns.  The benefit of using Flexbox implementation is the items in columns will stack on top of each other on a mobile browser instead of displaying side by side.  It will make your content responsive.  The style guide for using the grid is here:  Canvas LMS

Here are some screenshots of the "stacking" effect.

Full width:

Stacked:

You can see that the code will cause each column to stack on top of each other.  Here is the code I used for these screenshots:

<div class="content-box">

<div class="grid-row">

<div class="col-xs">

<div class="styleguide-section__grid-demo-element">

<p><strong>Instructor:</strong></p>

<p><strong>Class Location:</strong></p>

<p><strong>Class Meeting Times:</strong></p>

</div>

</div>

<div class="col-xs">

<div class="styleguide-section__grid-demo-element">

<p><strong>Contact Information:</strong></p>

<p><strong>Office Location:</strong></p>

<p><strong>Office Hours:</strong></p>

</div>

</div>

<div class="col-xs">

<div class="styleguide-section__grid-demo-element"><img src="/courses/15423/files/821/preview" alt="fye.jpg" data-api-endpoint="https://mcsd.instructure.com/api/v1/courses/15423/files/821" data-api-returntype="File" /></div>

</div>

</div>

</div>

[G_Petruzella]

Hi  @john_morris ​ -

I found the following to be a useful intro to tables w/r/t accessibility:

http://webaim.org/techniques/tables/

[hburgiel]

This is exactly what I was looking for, thank you!

How do you get Canvas to stop working in columns and go back to using the full width of the screen?  I understand that it's a best practice to avoid using tables, but I haven't found a better way to control where everything goes on the page.

[mmoore1]

Thanks for the ideas!  I am also finding div tags to be extremely helpful for organizing pages in Canvas and highly recommend them.  Great examples.  More to share with our faculty!