Design great pages using Tables.
 

When you build a website for your business, you’ll no doubt have a huge amount of information to include within your website pages. Your Reason8 Website Builder offers a host of tools and functions to help you design your pages so that visitors and viewers can easily take in your information. Encouraging visitors to your website to stay long enough to take in sufficient information to encourage them to respond to you is the key. One proven way to achieve this is to create website pages, which are easy on the eye and allow visitors to take in all your information in the simplest and most pleasant way possible. Adding structure to your pages to organise your content is a great way to do this and one of the most effective ways to add structure is to use tables.

Tables make it very simple to lay a number of images out into neat rows. They’re also great for helping to align, group or separate text and make it far easier to layout combinations of images and text.
Each table is made up of a number of rows and columns, the number of which is decided by you. The rows and columns create variable cells. By placing your content into these calls, you can control its position and dimension on the page. 
 

To place a table, set your cursor on the line where you’d like the table to appear and click the Insert Table icon in your editor. Don’t worry if it’s not in exactly the right place as you can move it by dragging and dropping later.
First you’ll need to decide on a few options for your new table. In the Table Properties window, you’ll see the following options:
 

ROWS -  Rows hold lines of one or more horizontal cells. The widths of each row cell are determined by the overall width of the table and can be set in pixels or percentage. If a table is 500 pixels wide, the width of the cells and cell spaces, when added together, can not exceed 500 pixels. The tallest cell in the row, which is determined by the cells content, determines a rows height.
COLUMNS - A column is a line of one or more vertical table cells. A column will be as wide as the widest cell in the column.
 

Select the number of rows and columns you need. Don’t worry if you’re not sure, you can always go back to add or remove them as you need by right clicking your table (on the background of the table not the content).
 

BORDER – This will determine the thickness of the border and add normal lines for the table cells. Border size can be set from 0 – 99. A setting of 0 will hide the lines of the table in live view but will be visible to you in the editor so you can arrange content cleanly on your page but without the grid lines. A typical border size is any number under 20.
ALIGNMENT (Left, Centre, Right) – Sets the position of your table on the page.
CAPTION – Inserts a title for your table, centred and above.
WIDTH – Set a specific pixel size or choose a percentage of your page width.
CELL SPACING - Cell spacing is the space between cells.
CELL PADDING - Cell padding is space between the cell wall and the content within the cell.
 

Top Tips
 

If you do need to edit your Table, simply Right click anywhere in the table background avoiding the content.
One of the main options in Table Properties is cell properties. Cell Properties allows you to insert cells before and after and delete cells. Merge cells to the right or down. Split cells horizontally and vertically. Alter the cell properties including Width and Height, word wrap (behaviour of text within cells), Horizontal and Vertical Alignment of content, Row and Column span, Background colour and border colour of each cell selected (select all cells to change colours on whole table).
Merging cells horizontally removes the column line within a cell and therefore allows you to centre any content. This can be useful for headings for your table and to align images.

When placing images in cells, I always find it easier to centre align them all. This can also make it help when placing text under or above images such as titles or descriptions as when the text is also centred, everything lines up cleanly.
If you choose to have an invisible table, extra rows in between content can help to space the content out nicely. You can also add background colour to these rows to create neat divider lines.
 

The great thing about using tables is that if you haven’t got it quite right, just right click and change it!
 

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version 5.9.3.006
(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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');