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 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:
Instructor:
Class Location:
Class Meeting Times:
Contact Information:
Office Location:
Office Hours:
https://mcla.instructure.com/api/v1/files/66518610" data-api-returntype="File" />
But now, I 'frame' each chunk of content with its own
, 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:
Instructor:
Class Location:
Class Meeting Times:
Contact Information:
Office Location:
Office Hours:
https://mcla.instructure.com/api/v1/files/66518610" data-api-returntype="File" />
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
.png)
