Deleting Vertical Lines in A Table

[natsmy]

Hello,

I am making a table on the home page in a Canvas shell.  I have inserted some pictures so to get them to line up properly, I inserted a table.  I don't want a border and was able to successfully delete the outside border, but there are still vertical lines between each "cell" in the table.  How can I delete those?  A picture is attached to show what it looks like.

Thank you.

[Chris_Hofer · Accepted solution]

@natsmy ...

While I do understand why some people like to use tables for layout purposes, tables are generally used to hold data rather than used for page layouts.  Tables also can cause some accessibility issues.  Earlier this morning, both @Ron_Bowman and I replied to another topic about tables, and we have some suggestions here:

Removing table without removing the icons inside t... - Instructure Community (canvaslms.com)

You might especially want to check out the link that Ron gave and the link in my reply about Home Sweet Homepages without Tables.

Hopefully these resources will be helpful to you.  Keep us posted...thanks!

[Chris_Hofer · Accepted solution]

@natsmy ...

While I do understand why some people like to use tables for layout purposes, tables are generally used to hold data rather than used for page layouts.  Tables also can cause some accessibility issues.  Earlier this morning, both @Ron_Bowman and I replied to another topic about tables, and we have some suggestions here:

Removing table without removing the icons inside t... - Instructure Community (canvaslms.com)

You might especially want to check out the link that Ron gave and the link in my reply about Home Sweet Homepages without Tables.

Hopefully these resources will be helpful to you.  Keep us posted...thanks!

[JustinDavidson]

I have a related, but different, question. I want students to enter a fraction in a quiz, so I create a table with 2 rows. The top row has an entry, and the bottom has an entry. I want to KEEP the horizontal bar between the numerator and denominator, but delete the vertical left bar that seems to always stay there (see middle pic). My other options are to have nothing, or a full box around the fraction. Does Canvas have the ability to place a specific border like this? Or is there an "add horizontal bar" option that will work?

Side note: The prompt is a right triangle with theta placed in one angle and "a" and "b" as given sides. There is a drop down for sin, cos, or tan, and then they enter in "a" or "b" into the numerator and denominator.

 

Table Border "None"/Cell Border "None":

Table Border "Hidden"/Cell Border "Solid 1px": 

Table Border "None"/Cell Border "Solid 1px": 

[James · Accepted solution]

@JustinDavidson 

There is no built-in control over individual aspects of the border. That is controlled by Cascading Style Sheets (CSS). You need to use the HTML editor in the question to control it.

I would turn off the border using Canvas and then click on the </> at the bottom of the editor to enter HTML view.

Find the td element for either the top cell or the bottom cell. On that cell add styling for border-bottom (top cell) or border-top (bottom cell). When done, click the </> to toggle back to the visual mode.

For example, it might look something like this (I've stripped out everything but the border).

<table>
    <tbody>
        <tr>
            <td style="border-bottom: solid black 1px;">`a`</td>
        </tr>
        <tr>
            <td>`b`</td>
        </tr>
    </tbody>
</table>

There is a slight accessibility issue as the border won't be visible to screen readers. Unfortunately, there's not a perfect way to reproduce the written form of mathematics in Canvas.

One alternative, which doesn't look as pretty, would be to use a / or ÷ between two horizontal input boxes. At least those would be read to someone using a screen reader.

[JustinDavidson]

Thanks James,

That did the trick. I checked the student view, and it looks like it shows for them. Thanks!