How do I Create a Three Column Layout Using Tables?

Note: You must be an Administrator or Content Administrator in order to edit content on the website.

Here’s what we’ll be creating:

 

Lets start out with the un-edited content. There’s a lot that could be done to improve the readability of the text. Let’s shorten the width and add it into a column layout.

Starting content, before columization

 

  • Start off by making sure your cursor is on a new line (see item 1).

Make sure your cursor is on a new line.

 

  • Click on the “Insert Table” button in the top row and select “Table Wizard” (see items 2 and 3).

 

  • This is going to be a 3 x 2 column structure. Add a column, then switch tabs to “Table Properties” (see items 4 and 5).

 

  • Set Width to ‘100%’ (see item 5). Be sure to include the ‘%’.
  • Set Cell Spacing to ’10’ and set Cell Padding to ‘0’ (see item 6).
  • Switch tabs to Cell Properties (see item 7)

 

  • Select all the cells by clicking “Select All” (see item 8).
  • Set Width for all cells to ‘33%’ (see item 9). Be sure to include the ‘%’.
  • Set Content Alignment to Left Top (see item 10).

 

  • Select the top three cells by holding the ‘Control’ button and clicking on them (see item 11).
  • Set Content Alignment to Bottom Left (see item 12).

 

  • Select the bottom three cells by holding the ‘Control’ button and clicking on them (see item 13).
  • Click on the Style Builder button (see item 14).

 

  • Select ‘Borders’ from the left-hand menu and set the Top border to be: Solid Line, 1px, a color of your choice (see item 15). I chose dark gray.

 

  • Select ‘Box’ from the left-hand menu and set Padding top to ’10’ pixels (see item 16).

 

  • Your table is finished! Click ‘Ok’ until you’re back at the content editor.
  • I’ll be pasting my header into the top left cell by highlighting everything between “Alice…Tea-Party”, copying it, then pasting it in (see item 17).

 

 

  • Next, I’ll add the paragraph of text to the cell directly below (see item 18).
  • Here’s what the table looks like so far:
  • I want to add in two more book excerpts to show what the column structure looks like when it’s full. Feel free to play around with the order of content you add to the columns.
  • The error I encountered (see item 19)  sometimes occurs when pasting multiple lines of text into a table. Try the following if you encounter this error:
    • If you are pasting in content from Microsoft Word or any other word processor, try pasting it into Notepad or any other text editor, copying the text from Notepad, then pasting into the table.
    • Paste in the lines one at a time.
  • Now your table is filled with content! Click “Save” in the bottom left corner to save what you’ve done.
  • Here’s what my table looks like after I saved:

 

  • Tip: You don’t have to fill each column. As long as you have set a Cell Width like we did in item 9 the cell will take up the space you tell it to regardless of whether or not you have included content (see example below).