finally got div to work to make table-like structure via html ... am I doing it right???

jc71
Community Member
‎08-12-2023 11:58 AM

I've previously used a formatted table from Word for the schedule, but as we switched to Canvas for the upcoming year, I wanted to try to make it natively in Canvas and not use tables so that I increase accessibility and responsiveness on mobile devices.

I've gone down a rabbit hole for the last several days looking at templates and code snippets related to grid, flexbox, etc., and think I finally got something working using div!  In particular, I wanted code that would create a template I could edit within the Rich Content Editor (i.e., that everything displaying in a row on the web page would be editable in a row in the editor).

There's definitely still formatting (including bulleted lists) I will play around with, but I was looking for something where the day's activities (readings, assignments to submit, and files used in class) would be on one row, and I could put all the weeks for a unit onto the one page and this worked!!!

Screenshot:

layout2.JPG

 

 

 

 

 

What I don't know is if the code I'm using is actually a good way to accomplish this!  My understanding is that I can't use classes and define the styles at the beginning, which would definitely be easier to update. Since I also looked at lots of previous posts, templates, and websites, I thought I'd put the final code up so others could use it also.

 

Any recommendations for the code, especially to improve accessibility and responsiveness?

 

 

<h2 style="background-color: #1385a2; color: #ffffff; text-align: center;">Week 2</h2>
<div style="display: flex; border: 1px black; border-style: none none solid none;">
<div style=" flex: 10%;">
<h3 style="color: #582c83; text-align: left;">Day</h3>
<p>Some text..</p>
</div>
<div style="flex: 40%;">
<h4 style="color: #582c83; text-align: left;">Prepare</h4>
<p>Some text..</p>
</div>
<div style="flex: 30%;">
  <h4 style="color: #582c83; text-align: left;">Submit</h4>
<p>Some text..</p>
</div>
<div style="flex: 20%;">
  <h4 style="color: #582c83; text-align: left;">In Class</h4>
<p>Some text..</p>
</div>
</div>
<div style="display: flex;">
<div style=" flex: 10%;">
<h3 style="color: #582c83; text-align: left;">Day</h3>
<p>Some text..</p>
</div>
<div style="flex: 40%;">
  <h4 style="color: #582c83; text-align: left;">Prepare</h4>
<p>Some text..</p>
</div>
<div style="flex: 30%;">
  <h4 style="color: #582c83; text-align: left;">Submit</h4>
<p>Some text..</p>
</div>
<div style="flex: 20%;">
  <h4 style="color: #582c83; text-align: left;">In Class</h4>
<p>Some text..</p>
</div>
</div>

 

 

1 person also had this question
Users who also had this question