Trouble recreating layout sans tables

jcole3

I am attempting to use some of the different styles in the style guide to replace a layout which currently uses tables. I am not sure the best direction to head (grids? image text combo class?), and would really appreciate your advice. Below is an example of the tables I am attempting to recreate.

 

Reading Assignments Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Read over the assignment criteria in Unit Seven in your course module. Access the Online Library and become familiar with navigating to and searching in the E-Resource Databases. You will be learning more about this useful resource in the upcoming units. Review Empower Module – Starting Your Research

Online Activities Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Read over the assignment criteria in Unit Seven in your course module. Access the Online Library and become familiar with navigating to and searching in the E-Resource Databases. You will be learning more about this useful resource in the upcoming units. Review Empower Module – Starting Your Research

themidiman

My colleagues and I have used inline CSS on

tags to structure content in a table style. Accessibility ought to be a key factor to consider when you do this as screen readers will attempt to read the content linearly, so my recommendation is to keep the 2 column format. It boils down to a basic starter template as shown below: Try this code in the html view of any RCE editor enabled area of Canvas:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR />    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">float</SPAN><SPAN class="punctuation token">:</SPAN>left<SPAN class="punctuation token">;</SPAN><SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>inline-block<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR />        <SPAN class="comment token"><!-- The icon content goes here. Adjust the px value to suit the needs <BR />        of your icon or image --></SPAN><BR />    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR />    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">margin-left</SPAN><SPAN class="punctuation token">:</SPAN>100px<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR />        <SPAN class="comment token"><!-- This is the text content. Note how the px value of the margin-left rule matches <BR />             width of the icon content div. Adjust as necessary --></SPAN><BR />    <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><BR /><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

It might help to put some filler text in each div so you can switch back to the visual view of the RCE and add your content using the Canvas RCE toolbar and keyboard. You should be able to switch back to HTML view as needed.

 

When you are ready to make a new section repeat the pattern. 

Hope that helps.