Create Tables

TUTORIAL PROVIDED COURTESY OF TEMPLATE DESIGNER - DESIGN AND DETAIL

This tutorial is a guide for creating a simple 5 row, 3 column table. I suggest you go through the tutorial a few times as written then after you have mastered it you can be back through and make changes like adding borders, background colors, etc.

Sign into your Store Admin area and click on Pages. For this tutorial I used my page, weblinks.php.

Find the Edit link next to the page you want to add the table to and click on it.


The editor will open for that page. Click on the Full Screen icon to expand the page.

First thing to do is center the page. Click on Justify Center.

Now click on the Insert Table icon.

Now click on "Advanced Table Insert".


You'll see the there are some values there already so lets' change those. Say we want a table with an area at the top for text, 3 boxes below the text and 4 rows of those. So put in Rows: 5, Columns: 3, Spacing: 2px, Padding: 2px, Borders: No Border (or you can set one in the drop down menu if you like) and  Collapse: Yes. That way the table will surround your text and photos.


Next lets' merge those cells across the top so we can add text. Click on the 0,0 cell and you'll see it's highlighted in yellow.

Now click on the Span > button to merge that cell into the one on the right.

Repeat the step again and the top row will be merged into one cell ready for your text.


You can repeat the process for any of the other rows or leave them as they are for adding photos. I merged the row at the bottom for more text. Remember you must click the cell to highlight it before attempting to merge the cells.


Now you can hit the Insert button.

You'll see the table has been added and it is selected.

Click on the top cell and then click on the Edit Table/Cell icon.
In the drop down menu click on Edit Table.
On the AutoFit tab check "Fixed table width" and put in 550 pixels.
(Depending on your template you may have to go a little smaller it just depends on how big
your actual store area is. If your designer didn't tell you be sure to ask her.)

On the Properties tab

You can add a border and background color if you wish, I'm just keeping things simple for this tutorial.
Click Ok and your table will be added to your page.
One more step then you can start adding your text and photos.
Go to the Edit Table/Cell icon again. In the drop down menu click on Edit Cell.
On the Autofit tab use these settings.


On the Properties tab use these settings. Don't forget "Apply to: Whole Table" at the bottom.


Click on Apply, then OK. Now you should have a table with 5 rows,
areas at the top and bottom for text and each area will be centered.
To add content just click within a cell. If you are adding pictures be
aware that as you add them the table is going to look a bit wonky until
they are all added. To save the table click on the full screen button
and then the Update button.

Now that you've created the table you may want to delete it and start again.
To delete the table click on the top cell then go to the View/Edit Source icon.


Now you're looking at the html for the page. See where the text is highlighted in blue?
That's where you clicked in the top row. The area highlighted in yellow is the entire
html code for the table you created.

Take your mouse and highlight from <table style, etc, etc> to </table>
and click on the scissors icon to cut that code from the page.

Click Apply then OK. You can see the table is gone now.
Click on the full screen button and then the Update button.
I hope this tutorial was helpful and you'll find some time to
practice and create some different tables for your web site.