HTML_Columns

toc
 * Note:** The 2-column layout effect can also be built in CSS using no HTML tables. Hopefully we can have an example of that up here soon.

There are a great deal of design options available using the **Insert Widget Tool** functionality of Wikispaces (formerly called "Embed Media"), but users should be cautious of cross-platform rendering issues. Please consult the lists of Web Browsers and Web Standards when testing custom Themes across multiple browsers for compatibility.

include page="table_col2_blue_top"

How to Build
include page="table_mid"
 * **Item 1**
 * **Item 2**
 * **Item 3**

2 Blue Columns!
include page="table_bot" For more on building color boxes, see **Pretty colored text boxes** in **SealWyf's Sandbox Files**. For more on building page columns, see **A two-column page** in **SealWyf's Sandbox Files**.
 * **Item 4**
 * **Item 5**
 * **Item 6**

It might sound ironic, but these columns do not use Wikispaces' built-in table functionality ( ``|| Wikispaces || Table ||`` ).
 * Wikispaces || Table ||

The blue table effect can be seen on the **navigation** page. It is recommended that you use 3 **include** files when building your table of 2 colored columns. In this way, you can reuse your code on as many pages as you like, within your wiki, without having to rewrite more code. This example uses HTML and JavaScript code, but could also benefit from some CSS styling. As you begin to understand how the code works, you can easily develop more sophisticated HTML and CSS effects.

1. Create a wikipage called **table_col2_blue_top**. This wikipage will hold the information to start building your colored table. The page consists entirely of only 1 section of embedded code -- entered with the **Insert Widget Tool**. The Widget tool looks like a TV set, and the entered code looks something like the following.

code  document.write(' ') code In the code sample above, you could change the bgcolor attribute.
 * Contents of wikipage: table_col2_blue_top**

2. Next you will create 2 similar, but simpler wikipages. The second wikipage simply declares where the colored table breaks into its second column. Again, the code must be inserted into the **Widget** tool. No other content resides on this wikipage.

code  document.write('<\/td>') code In this code, you could set bgcolor and CSS stylings for the second column. The code also goes into the **Widget** tool, with no other wikipage content.
 * Contents of wikipage: table_mid**

3. Finally, finish off your columns by terminating the table.

code  document.write('<\/td><\/tr><\/table>') code
 * Contents of wikipage: table_bot**


 * Warning!** While creating and editing these wikipages, there is a chance that you will have difficulty opening your wikipage for editing. Oftentimes the problem can be remedied by linking directly to your **Wikispaces** wikipage editor: [|http://MYWIKISPACE.wikispaces.com/page/edit/MYWIKIPAGE] (for example -- point your browser to your own wikispace and wikipage for editing).

Once the 3 wikipages are ready for **include**, you can create colored tables on as many wikipages as you like. (As of July 2007, page includes are allowed only within the same wikispace -- not across separate wikispaces.) To create the blue table that heads up this section, you would type into your wikipage editor: code include page="table_col2_blue_top"

How to Build
include page="table_mid"
 * **Item 1**
 * **Item 2**
 * **Item 3**

2 Blue Columns!
include page="table_bot" code Note that when declaring your colored table on a wikipage — according to this method — you are **not** using the **Widget** tool. The "widget(s)" (actually, the JavaScript, HTML and CSS) are already embedded in the included pages. This safely hides your widget/media/code on its own separate pages, for re-use whenever you like, and somewhat protected from other users who might edit your code inadvertently.
 * **Item 4**
 * **Item 5**
 * **Item 6**