Removing table without removing the icons inside the table

[l_t_l_stende]

Hi, 

I work with universal design at my institute. We have previously used a lot of tables, but have been told that this is not compatible with universal design. For that reason, I wonder if anyone knows how to remove a table without removing the icons in the table? See screenshot. I also wonder if there are any open Canvas rooms that are good examples of universal design? 

[Ron_Bowman]

@l_t_l_stende -

I doubt there is a way to do this directly in Canvas.  However, you might want to look at the following page:

https://html-cleaner.com/features/remove-tables/

Click on the start removing tables link partway down the page.  Then just pull the html code from your Canvas page into the editor they give (put it in source code format first).  I have not used this product - I just found it.  However, It looks like it might do what you want.  I just played with it with a sample.  below there are options for how you want to clean the html.  It has a remove table formatting option that you can select.  

first picture is the editor picture with table formatting, second is without table formatting

 

 

Ron

[l_t_l_stende]

Thank you for this, 

But when I tried to remove the table the icons does not appear at the same place. Se screenshots. 

Is you have a solution to fix that problem it would be great 🙂

Best regards 

Lars Tore Larsen Stende

[Ron_Bowman]

@l_t_l_stende 

Lars -

I think you would have to look at the actual html code to see if there were some minor changes you could make to fix the formatting.

Probably the more complicated the table setup, the more difficult it is to remove the table.

You could try simplifying the table some before using the cleaner.  Or make sure that remove table formatting is the only option selected.

it looks like there are several empty cells in the original with some empty rows.  Deleting those first may help.

Sorry I can't be any more help.  Good luck.

Ron

[Chris_Hofer · Accepted solution]

Good morning, @l_t_l_stende ...

My understanding is that tables should be mainly used to hold data and not for page layout ... as there can be issues with accessibility.  It looks like you have some icons and some text below them (possibly within a hidden table).  You could try to click on those icons while editing the page to highlight each, then hit the keyboard combination Ctrl+X (cut) to remove it from the table.  Then...either in a new page or a lower area of the same page, press Ctrl+V (paste) on your keyboard to paste the icon back on the page.  You could then repeat this for the other icons and also the text on that page.  Then, that table could be deleted from the page.

I am also aware of a blog post from Chris Long (@clong) called Home Sweet Homepages without Tables that you might want to take a look at.  A couple of the links in his first paragraph go to the following pages:

• Creating an inviting course home page
• Columns Without Tables: code-snippet

Hopefully some of these resources will be of some help to you.  Sing out if you have any other questions about this...thanks!

[l_t_l_stende]

Thank you for these resources. Do you also have any video clips that you would like to recommend?