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

[jc71]

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:

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>

[Chris_Hofer]

@jc71 ...

I haven't used code like this to try a table layout on Canvas pages.  So, I cannot speak to the code you are using.  However, I am curious to know if this code looks good on your mobile device(s)?  Have you checked that out yet to see if there are any issues you'd need to address there as well via the Canvas Student or Canvas Teacher apps?

[SusanNiemeyer]

It looks great, but I agree that you should verify that this structure looks good on a mobile device. Also, you'll need to make sure that the content is accessible to someone using a screen reader. Is there any reason not to simply create a table in Canvas with the RCE?

[Chris_Hofer]

@SusanNiemeyer ...

Tables aren't always accessible.  Tables are typically used to hold data, but some people like to use tables for design layout.  While I understand why people would want to do that, I'm guessing that maybe @jc71 is trying something different because of these reasons.

[jc71]

@SusanNiemeyer Yes, Chris's explanation is why I am staying away from tables. The formatting also doesn't paste into the editor in Canvas, so I would be doing that all over again.

It looked ok on both the student app and website through safari on an older iphone. Chrome and firefox on my machine looked good, and the windows narrator screen reader at least read the 'cells' in the correct order.

The vertical view on the phone would be helped by padding the headers a little so I will add that.

@Chris_Hofer Is this the only way you know of to get the css styling of background colors, headers, etc.?

[Chris_Hofer]

@jc71 ...

---

@Chris_Hofer Is this the only way you know of to get the css styling of background colors, headers, etc.?

---

I'm not sure of an answer for you on this, unfortunately.  There may be others here in the Community that could better answer this question, though.

[Cherie_Lakes]

Shewww,  I went down this rabbit hole too for the same reason.   Thank you for figuring this out!