Web Genius Blog

Did you know you can create a table in any spreadsheet program like Excel, add formatting, and then upload this to any Web Genius page? You achieve this using Table Sections. Below is the info from the Help Center page on Table Sections. To view this content with all the graphics in place, just click on the Help Center button in Control Center and go to the page: Site Center > Types of Sections > Table Sections...

Table Sections

You can add a table to any page on your site by creating a table section in Site Center.

First, you need to create a "CSV file" using a spreadsheet program like Excel or a database program like Access. CSV is one of the standard "Save as..." options from Excel. So create your table in Excel, then "Save as.." - as a CSV file.

A CSV file uses commas to separate out the cells in a table (ie CSV stands for Comma Separated Values). For example the CSV file for this simple table:

would look like this:

A,B,C
1,2,3
x,y,z
You can make your own CSV file in a word processing program if you do not have a spreadsheet or database. Every line break will create a new row, and every comma will create a new cell. If a cell contains a comma, enclose everything to go in the cell in quote marks. For example:

1,Jeff,Simmonds,"Jeff Hastings"
2,"Phill, Napier",Phill, Napier
will look this this:

Formatting codes

Creating your file in a spreadsheet program like Excel makes it easy to add formatting codes which enhance the layout of your tables. The formatting codes are inserted in a column on the far left of your spreadsheet, so the first step is usually to insert a new column to the left of Column A of your Excel file.

The codes you insert in each row provide the formatting for that row of the table. For example you can specify text styles (from the existing text style sheet that you have for your website), background colors as well as horizontal and vertical lines.

Text Styles. To insert a text style code use the format [T=textstylename], where textstylename is the exact name from your website's style sheet. (ie If the spelling isn't exactly right, it won't work).

Background Colors. To insert a background behind any row use the format [B=color], where color is an option from the color palette of eight colors set up for your site. All Web Genius sites have an eight color palette. Each color palette has a dominant (D) and a highlight (H) color, then lighter versions of these colors: D60 (60% of the dominant color); D30 (30% of the dominant color); H70 (70% of the highlight color); H30 (30% of the highlight color), plus black (B) and white (W). Therefore the eight colors in your site's color palette are D, D60, D30, H, H70, H30, B and W.

Horizontal and Vertical Lines. You can insert horizontal lines between rows and/or vertical lines between columns. To insert a code for a horizontal line you first need to create a new row in your spreadsheet in the place you want your line to appear. Then in the far left cell of this row, insert the code: [L=hori]. To insert a code for a vertical line, you first need to create a new column in your spreadsheet in the place you want your line to appear. After this you need to also insert a new row at the very top of the spreadhseet. Then in the first cell of the column where you want your line to appear, insert the code: [L-vert]

An example. The following spreadsheet, when saved as a .csv file and uploaded into a Table Section...

...results in the following table:

Uploading your .csv file

Once you have created the CSV file, you can add it to a page to create a table.

Go to Site Center and select the page you wish to add the table to.

You then need to insert a Table Section in the position that you want the table to be situated. You do this using the Insert Section feature which is located between every existing section.

Select "table" from the drop down menu and click on the "insert" button where you wish the table to be, then click on the "Edit Section" button

To upload the CSV file containing the table text or data, click on the "Upload CSV file" button and then locate the CSV file on your computer.

You can then choose the border and colors of the table.

"D" is the dominant color that has been assigned to your site. "D60" is a 60% tint of the dominant color. "D30" is 30% of the dominant color.

"H" is the highlight color - the secondary color that has been assigned to your site. "H70" is a 70% tine of the highlight color."H30" is 30% of the highlight color.

"B" is black. "W" is white.