cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
lrichard
Community Member

Question about column widths in a table?

Jump to solution

In a multi-column table, how to I create columns with different width's?

1 Solution

Accepted Solutions
chofer
Community Coach
Community Coach

Hello there,  @lrichard  Thank You for posting your question here in the Canvas Community.  If you take a look at this Guide, How do I insert a table using the Rich Content Editor?, it will get you started on how to create a table via the Rich Content Editor (RCE) in a page of content in your Canvas course.  As for settings the widths of columns, you can do this by modifying the cell column properties within the table.  As you can see from the images included in that Guide you can modify the column and row properties via the provided interface.  Or, if you are comfortable editing HTML, you could also do it there.  Here's an example of a multi-column table (4 rows, 3 columns) where the first column is 40%, and the second and third columns are 30% each (for a total of 100%).  The overall width of the table is set to 80% of the total width of the page:

<table style="width: 80%; border-collapse: collapse;" border="1">
<tbody>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>

I hope this helps, Levi!  Please let us know if you have any questions about this...thanks!

View solution in original post

6 Replies
chofer
Community Coach
Community Coach

Hello there,  @lrichard  Thank You for posting your question here in the Canvas Community.  If you take a look at this Guide, How do I insert a table using the Rich Content Editor?, it will get you started on how to create a table via the Rich Content Editor (RCE) in a page of content in your Canvas course.  As for settings the widths of columns, you can do this by modifying the cell column properties within the table.  As you can see from the images included in that Guide you can modify the column and row properties via the provided interface.  Or, if you are comfortable editing HTML, you could also do it there.  Here's an example of a multi-column table (4 rows, 3 columns) where the first column is 40%, and the second and third columns are 30% each (for a total of 100%).  The overall width of the table is set to 80% of the total width of the page:

<table style="width: 80%; border-collapse: collapse;" border="1">
<tbody>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
<tr>
<td style="width: 40%;"></td>
<td style="width: 30%;"></td>
<td style="width: 30%;"></td>
</tr>
</tbody>
</table>

I hope this helps, Levi!  Please let us know if you have any questions about this...thanks!

View solution in original post

susanjaneclark
Community Participant

Hi.  My tables tend to start out with column widths as I set them up, but 'drift' over time.  Typically,  I use a table for sharing lesson resources with my students, who I see 2 x per week for 2 hours each time.  So my table has 3 columns, like this:

Term / Week / DateTuesday, 11am to 1pm, Room A2.08Thursday 1pm to 6pm, Room D.102
W8, 3rd December

Slides: Human Rights (linked file)

Reading: UDHR (linked file)

Slides: World Order (linked file)

Reading: United Nations (linked website)

I must be able to adjust the columns when I first create the table, as I always start with something very similar to what I've done above.  But inevitably the Middle column gets wider and the Right most column gets narrower over time. And nothing I do seems to allow me to adjust that middle column again - I can't drag it and I can't find a place to reset the measurement.

Term / Week / DateTuesday, 11am to 1pm, Room A2.08Thursday 1pm to 6pm, Room D.102
W8, 3rd December

Slides: Human Rights (linked file)

Reading: UDHR (linked file)

Slides: World Order (linked file)

Reading: United Nations (linked website)

I note that my CANVAS sites do not operate anywhere as smoothly as this page, which is like working in MS Word.

Chris, although you said the column width can be adjusted in Rich Content Editor, I can't see how to do that. I can see a 'table width' - which I always set to 100% - but not a column width.  Can you please clarify for me.

Many thanks

Susan Clark

(Teacher... who doesn't want to venture into HTML)

Hi  @susanjaneclark ...

The column width is actually set in the cell properties for each cell in your table...if I'm interpreting the table editing properties correctly.  So, you'd have to edit each one to change the percentage.  If you wanted to make your cell columns more static (so that the columns don't shift around as you add text ... which can happen with column widths when they are percentages), you could actually do something like this:

<table style="width: 80%;" border="1">
<tbody>
<tr>
<td style="width: 150px;"><strong>Term/Week/Date</strong></td>
<td style="width: 200px;"><strong>Tuesday</strong></td>
<td style="width: 100px;"><strong>Thursday</strong></td>
</tr>
<tr>
<td style="width: 150px;">data 1</td>
<td style="width: 200px;">data 4</td>
<td style="width: 100px;">data 7</td>
</tr>
<tr>
<td style="width: 150px;">data 2</td>
<td style="width: 200px;">data 5</td>
<td style="width: 100px;">data 8</td>
</tr>
<tr>
<td style="width: 150px;">data 3</td>
<td style="width: 200px;">data 6</td>
<td style="width: 100px;">data 9</td>
</tr>
</tbody>
</table>

This is very similar to my first example above...with some key differences.  The table is still filling 80% of the width of the page (line 1).  Lines 4, 5, and 6 (and then the groups of lines 9-11, 14-16, and 19-21) show that, instead of cell widths as percentages, I've set them to widths in pixels.  So, all the cells in column 1 have a width of 150 pixels; all the cells in column 2 have a width of 200 pixels; all the cells in column 3 have a width of 100 pixels.  (Note: In line 1, you could change 80% to 450px if you wanted your table to only be 450 pixels wide...the total of all columns.)  Here is what the table would look like to the end user (80% of the table filling the available space. 20% white space on the right.)

Pixel Table

The link that I provided in my earlier reply includes the directions on how you can use the table tools to edit the cell widths, columns, rows, and the table itself.  For example, when I edit my page with this table on it and place my cursor in the cell for "data 1", I go to the cell properties screen, and I can edit the width of that cell (the below screen shot matches the code produced in line 9 of the HTML code above):

Cell properties

If you use the "cell properties" screen like I've shown below, I don't think the cells will all resize to the same width until all of them are equal.

I hope this helps a bit, Susan.

susanjaneclark
Community Participant

Thanks Chris.  I don't have a clue about how to do the HTML coding bit... where it goes or how to get there.  I'll try adjusting each cell as you say and see if they change at the end. It will end up being a loooong job, I think.

Thanks again for replying. It is much appreciated

Susan

Hi  @susanjaneclark ...

Whenever you build a page of content in your course, the HTML editor is also available for those who like to tweak the code from time to time.  The HTML editor can be accessed via a link at the top right corner of the RCE (Rich Content Editor)...as shown in this Guide: https://community.canvaslms.com/docs/DOC-13008-4152719750  You can always toggle between the HTML editor and the RCE.  I hope this helps.

mathomas
Community Participant

If you are able to access the html, as Chris outlines above, there is a quicker way. I was able to copy the html code for my table and paste it into Notepad (or use some very basic text editor). I then did a search & replace on the '??px' piece to replace it with '??%'. Once I made that change, I copied that text back to replace the html for the original table, then saved. That did the trick, and I didn't have to change each cell individually.