build a websiteTable Layouts

When you build a website you really need to make sure that your website pages are easy to look at and are designed in a way, which actually helps visitors to absorb all your information. Displaying your content as neatly as possible can help you to ensure this. One of the best ways to design neat and structured pages is to use tables. Reason8’s table function is incredibly easy to use and so will help you to achieve perfect structure on all your primary pages.

Tables are a great way to display a number of images or different categories or types of information. They can also help you to line up and display combinations of images and text in the simplest format. When placing images in cells, which have captions or text descriptions, it’s easier to line everything up by centre aligning them all. With more control over positioning, tables give you more control over the position and dimension of your content in and around other content on your page. It’s a bit like creating a mini page within a page.

Tables are made up of rows and columns and the table properties offer a whole host of options including size, colour, border widths, 3d options, splits and merges of cells, etc., etc., etc.
To place a table, open the page you want to work in the editor view and left click once to set your cursor on a new line where you want the table to appear. Click the Insert Table icon in your editor.

build a website

build a websiteIn the Table Properties window, which will open up, you’ll see the following options:

ROWS -  Rows contain one or more horizontal cells. Type in the number of rows you need here.

COLUMNS - A column contains one or more vertical cells. Type in the number of columns you need here.

BORDER – Choose your required border size between 0 – 99. A setting of 0 won’t show any border lines on your live page but you’ll be able to see them when you’re in the editor so that you can edit the table. 99 will create an enormous border size. We’d recommend setting the size to 20 or below. 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.

ALIGNMENT (Left, Centre, Right) – Sets the position of your table within existing content on the page.

CAPTION – Inserts a centred title above your table.

WIDTH – Set a specific pixel size or choose a percentage of your page width.


- Cell spacing is the space between cells.

CELL PADDING - Cell padding is space between the cell wall and the content within the cell.

build a websiteOnce you’ve selected your initial table properties, click add to website. You can always go back and alter the options as required by simply right clicking your table.

Top Table Tip....

When you right click to access your Table Properties, right click on the background of the table…NOT on the content. Also when you right click, keep the cursor off the first drop down menu and go onto your chosen option from the side as sometimes it can jump straight to the cell properties menu. If this happens, simply right click the table again.

Right clicking your table provides options to insert or delete rows and columns, amend cell properties, amend table properties and Cut, Copy or Paste.

In the Cell options, you can insert 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, Horizontal and Vertical Alignment of content, Row and Column span, alter background and border colour of each cell selected.

Happy Tableing!

 build a website

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(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');