Text and Images - Using Tables


The Text and Image editor allows you to apply advanced structuring of text information, images or data on the page in multiple rows and columns by using tables.  To structure some content using tables, roll over it on the page and open the Text and Image editor from the wrench icon at top left.


To add a table, 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 cells adjust the Cellspacing in pixels.

If you want to change the size of a cell use the Cellpadding option.

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


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.


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.