How to use tables to create a professional layout

How to use tables to create a professional layout


You can achieve a professional layout for your webpages by using customised tables to structure your content.

Add a table

This is a long knowledge paper but the information here is very powerful.

Achieving the effect you want from your webpage can often seem difficult and you may find yourself wondering why things don’t always look as you expect. However, the best looking websites use tables with invisible borders to layout content. The table management dialogues in our editor are very powerful and will help you to create amazing effects. 

We recommend starting with a blank page layout and insert a table with a number of rows and columns suitable for what you are trying to achieve. It is easier to create a few little tables than 1 big complicated table .

To add a table click the table icon on the editor and a table dialogue box will appear.

business website builder

business website builder

With the table created you can then go about adding the words and pictures to the cells. 

Initially, you may find that the cell widths expand or contract dramatically. But as you start to enter information the columns will automatically size to fit the content entered.

The options are self explanatory but the two most powerful properties are worth a little extra explanation:

A note about cell padding and cell spacing

Cell padding is the distance in pixels from the edge of a table cell to where the content of that cell starts. Cell spacing is a measure of how far apart the cells of a table are.

business website builder

Table width

When deciding on the width of the table that you want to use you may not know the exact size of the editable area and so an exact value in pixels is difficult to gauge. To overcome this you can use the percentage drop down. A value of 100% ensures that the table occupies all of the editable width available.  This is very handy if you later change you design to be wide or narrower. The table width will adjust itself automatically.

Hidden options

You may wish to modify the table settings later. The easiest way to do this is to right click inside the table within the editor. You will see the following menu bar:

business website builder

There is lots of extra formatting functionality here that is worth experimenting with. You will soon realise that cell colouring and structural changes will give you more formatting options than you ever thought possible.

A final note about putting images in tables

When you add an image to a table cell, the table cell will always be forced to be at least this width. Therefore, if you put large images in table cells you can force the table to be wider than the template allows. This will cause your webpage to be corrupted.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');