3columntable

3 column layout using tables. An easy way to make a 3 column layout is to use tables.

Make a table 1 row by 3 columns and enter your text into the columns. It will look something like this - a bit cluttered.

Now we need to space it on the page, and space the words in the columns. The best way is to use a simple 'cheat'. At the beginning and end of one of the text rows in each column, or at the bottom or top of each column, put a row of dots until the column is spaced correctly.

then select each row of dots and change their colour to the same colour as the background of the page. Now when you save the page, you cannot see the dots but the spaces are held in place.



Now we need to take out the table borders so that the text appears on the page in 3 columns. In the embed widget under 'other html' paste the following code. code  //<![CDATA[ document.write('.wiki td {border-width: 0px;} <\/style>') //]]> code Now the border have been removed and you have 3 columns of text on your page.

3 column layout reading the content from other pages: You can also import content from other pages into columns.

1. Make 3 pages - one for each column, and put your content of each column onto each separate page. Remember if you want all 3 columns to appear on one page, then you will need to only use a third of the page in width. For instance, our left column page could be called 'leftpage' and it would only have on it the content that will appear in the left column. You can also make another page for the heading of the 3 column layout and on this page put the heading as you want it to appear. 2. Now on your 3 column page copy the following code into the text editor. code code 3. Switch back to the visual editor and your page will look something like this 4. Double click into any 'include page' widget and the following box will appear. 5. Now type in the name of the corresponding page you made in #1 and it will appear with a green tick. Click the embed wiki page button and now that column will read from that page you have linked it to. 6. Do the same for the other columns and the heading. 7. When you need to change the content, you will change it on the actual content page (not in the columns) and the columns will update automatically.
 * = include page="{$headingPage}" ||
 * include page="{$leftColumnPage}" || include page="{$centerColumnPage}" || include page="{$rightColumnPage}" ||