Using Tables

The Text and Image editor allows you to structure your text information, image, movies and snippets in multiple rows and columns by using tables. Tables will allow you to structure any content that you may add from the Text and Images editor - for example, you may structure with tables text, images and PayPal buttons added through the HTML snippet option inside the Text and Images editor.


To structure any other page content in rows and columns, use the Page Column option and Sections.

  
To add a table, open the Text and Image Editor and click the Insert Table icon from the toolbar on top of the Text and Image editor. You now have a table with 1 row and 2 columns.


  

   

To add more rows to your table, click somewhere inside the table to see the table toolbar to the right. Click the Insert Row icon .
 

Once you have added more rows to your table, you may want to add rows in the middle of the table. Position the cursor inside the row before which you want your new rows to appear. Click the Insert Row icon as many times as new rows you need (each click adds one row).


To delete a row: position the cursor inside the row you want to remove. Click Delete Row 
 

To add a new table column, position your cursor in the table column before which the new column should appear. Click Insert Column .

 

If you want to remove a table column, position the cursor inside the table column to be removed. Click Delete Column .

 

To merge several neighboring table cells, select them by dragging the cursor through all of them. Selected cells will get a thin red border around. Click the Merge Cells icon  . Note that you can only merge cells on one and the same row.


 

To split a table cell into two or more cells, position the cursor inside that cell. Click Split Cell icon . Your cell is now split into 2 cells. If you need to split that cell into more cells, just click the Split Cell icon again.


If you want to remove the table border its width should be set to 0px. Use the color picker to select a color. See below for more information.

To change the spacing between the cells adjust the Cellspacing in pixels. To change the amount of space between the contents of the cell and the cell wall, use the Cellpadding option. Here is how the cellspacing and cellpadding will affect the appearance of your table cells:


No cellspacing / cellpaddingCellspacing enabledCellpadding enabled



To indicate where the content of each cell should appear - at the top, middle or bottom position, select from Cell Valigndropdown menu.

 

In some cases, the content added inside a table cell may need to be formatted into columns and rows. In this case, you may add another table in the table cell. Put the cursor in the table cell and click the  icon to add another table with 1 row and 2 columns.

 

Table size and dimensions

You can set the size of a table by using either pixel or percentage dimensions. They can be switched if you activate px or %

With dimensions set in percentage, the width of your table will not be fixed - it would be set as a percentage of the text area width which may vary in different screen resolutions. By choosing to set dimensions in pixels, your table will have a fixed width which will not change on different screen resolutions.


Similarly, you may define column width as percentage from the table width or again in pixels. To set width for a particular column, click inside the column fill in the value in the Column Width field

When you set your column's width in % - make sure they add up to 100%.
When you use px, the sum of the px for each column should be equal to the width of the table in px.

Have in mind that if your content is larger than the width of the column your defined (in % or px) - the table column will expand to accomodate your content.


Using the color-picker feature

Using the color-picker you can change the color of your table, cell or table border to a variety of colors.

To access the tool click on the  icon for either Table or Cell background.

 

In the window that appears you pick the hue of the color from the main area and switch between colors using the

rainbow-like area next to it. You have a selection of colors recommended for this design on top.

 

When you select a color, its Hex value code appears in the field. If you know the hex value of your desired color

 you can select the color by inputting its value there.

Use the  icon to remove the selected color.


Example: Here is how you can use tables to add PayPal buttons to your pages:

 

1. Add a table with several rows and columns. Add your product image, description, price and PayPal button code in the table cells. The HTML snippet in the snapshot below is a placeholder for the PayPal code.

 

 

2. On your page the products and payment buttons will look like this: