Support & Documentation

Close
How do I improve the layout of my page using a table?

The use of table is great for aligning images and texts on your site horizontally by using multiple columns. This would appear much the same as a newspaper article. Tables can also fix a number of formatting issues vertically by using multiple rows. However, leaving borders on your tables can often look unprofessional if not done correctly. The steps below will show you how to insert a table into the text of your page and hide the border.

> Please click “Edit a Page” from the main screen of the console and select a page to edit.

Layout Table_1

 

> Once you are in the text editor please put the cursor at the point where you would like to insert the table into your page.

> Click on the “insert table” button located on the top line of buttons (See image below).

Layout Table_2

 

> Set the number of rows and columns as desired in the fields provided.

> To remove the border from the table completely, set the Border size ‘0’. This will hide the border from your website and will appear with a dotted line while you are editing the page.

Layout Table_3

 
> There are options available to modify background colour and to insert an image as a background. Please see the background options above.
> Click the “OK” button.
> You may now insert text and images into the cells provided / outlined by the dotted lines.
> Once you are happy with the changes you have made, click “Save” to update your website.

Layout Table_4

 

You can now view the result by refreshing that page in your web browser.

info  Click here to see more about table.

Home page layouts using table:

Example-1:

5

 

This layout has got text at the left and bottom of the images. There are four images added here.

How did we do this?

 

6
7

At first we inserted a table of 3 rows and 3 columns after making the basic plan in mind. Changed the border size = 0 so that the table doesn’t show the border on live site. Please see the image above.

8

 

Modify the table by Merging cells. Selected cells together and then clicked on Merge Cells tool.

info  Click here to see more about table.
       Click here to see, how to insert images.

Example-2:

9


This layout has got text at the left and all images at the right side.

How did we do this?

10


This time we planned for a table of 3 rows and 2 columns. Changed the border size = 0 as usual so that the table doesn’t show the border on live site.

11


Modify the table by Merging cells. Selected left column’s cells together and then clicked on Merge Cells tool.

info  Click here to see more about table.
       Click here to see, how to insert images.

Example-3:

12


This layout has got text and  images aligned randomly.

How did we do this?

13


This time we inserted a table of 3 rows and 3 columns. Changed the border size = 0 so that the table doesn’t show the border on live site.

14


Modify the table by Merging cells. Selected cells together and then clicked on Merge Cells tool.

info  Click here to see more about table.
       Click here to see, how to insert images.

 Example-4:

15


This layout has got text in the middle of images.
How did we do this?

16


We inserted a table of 2 rows and 3 columns. Changed the border size = 0 so that the table doesn’t show the border on live site.

17


Modify the table by Merging cells. Selected cells together and then clicked on Merge Cells tool.

info  Click here to see more about table.
       Click here to see, how to insert images. 

Example-5:

18


This layout has got randomly aligned text and images.
How did we do this?

19


We inserted a table of 2 rows and 4 columns. Changed the border size = 0 so that the table doesn’t show the border on live site.

20

 

Modify the table by Merging cells. Selected cells together and then clicked on Merge Cells tool.

info  Click here to see more about table.
       Click here to see, how to insert images.