Text and Images - 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 (see how).

 

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


To add a table to one of your pages, open a Text and Images editor and click the Insert Table icon from the toolbar. You now have a table with 1 row and 2 columns.

   

*You must enable the to see all optional settings.


Add more Rows and Columns to your table. Just click inside an existing table cell, and select the appropriate icon from the right:

  • Insert Row Below
  • Insert Row Above
  •  Insert Column at Left
  • Insert Column at Right

Table Width 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 %, 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.



Default Table Settings Options
Roll-over to see Advanced Options
Table Properties Settings

Delete a Row or Column
  • Click in a cell in the Row you want to remove. Click Delete Row
  • Click a cell in the Column that should be removed. Click Delete Column

 

Merge several neighboring table cells by dragging the cursor across them. Selected cells will be highlighted with a thin red border.

 Click the Merge Cells icon
Note: You can only merge side by side or stacked cells.

Split a single table cell into two cells by positioning the cursor inside that cell. Click the Split Cell icon .

IMPORTANT
:  You can Split a cell that has been merged, but you cannot split an empty, unmerged cell. You can, however, split the contents of an unmerged cell and distribute the divided contents across other cells.



Table Options
The Border Width is set to 0px by default. You can add a Border to your Tables by specifying the Border Width in pixels and selecting the desired border color from the color icon to the right. Clicking on the border color icon will open a Color Picker where you can Apply or remove the border color. 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.


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 / cellpadding Cellspacing enabled Cellpadding enabled

Use the Align Table at options to indicate where the Table should be located within the available space on the page - Left, Center, Right.

Table Background
You can change the color or add an image to the background of your tables. Use the icons to adjust image starting Position within the table, as well as vertical and horizontal Tiling.






Set solid colors for individual table cells, alternating rows, or the entire background using the HTML Color Picker.














Set a single full-size  image as the table background.

















Set a smaller image and apply tiling vertically, horizontally, or both directions.













Solid
  • set a background Color using the Color Picker.
  • upload a Background Image
  • Specify Image Position and Tiling pattern
Zebra
  • Set a hex color for Odd / Even Rows with the Color Picker
  • upload a Background Image
  • Specify Image Position and Tiling pattern



Solid + Zebra
  • Set a Table background Color using the Color Picker.
  • Select hex color for Odd / Even Rows
  • upload a Background Image
  • Specify Image Position and Tiling pattern

 

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.


Cell Options

You can define Cell / Column Width in px or %. To set width for a particular column, click inside a cell and enter a value in the Width field. When you set your cells width in %, make sure all columns will 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 accommodate your content.


 
The Align Content at settings are used to position content location, relative to other content in cells / columns to the right or left.

Cell Background
  • Set a Table background Color using the Color Picker.
  • upload a Background Image
  • Specify Image Position and Tiling pattern