Lay it on the Table

It’s vitally important for your website pages to be easy on the eye to help visitors take in all your information in the simplest and most pleasant way possible. Adding structure to your page to organise your content is a great way to achieve this and one of the most effective ways to add structure is to use tables.

Tables can be very useful should you have a number of images, which you need to display. They can also help you to align, group or separate text and make it far easier to display combinations of images and text.

Tables are rectangular boundaries made up of rows and columns, which create variable rectangles called cells. By placing your content into these calls, you can control its position and dimension.
To place a table, set your cursor on a new line and click the Insert Table icon in your editor.

In the Table Properties window, You will 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.

BORDER – 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. While 99 is the biggest number you can put into the border size window it is enormous and not practical. Ideally set the size to any number under 20. This will determine the thickness of the border and add normal lines for the table cells.


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.

The first step is to select the number of rows and columns you need. If you’re not sure, don’t worry you can always go back to add or remove them as required by right clicking your table (click on the background of the table not the content).

Right clicking your table also provides the following options:
Cut, Copy, Paste.
Cell – 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).
Row and Column - insert before and after and delete.

Top Tips

When placing images in cells, I always find it easier to centre align them all. This can also 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. 

You will need to do some maths when setting the widths and heights of both tables and individual cells. 

Tables within tables should be used carefully or better still avoided as “Nesting tables” as they are called, can create excessive and complicated HTML code, which can make your web page slow to load and could cause errors on your page.

build a websiteWe'd love these blog pages to become a handy forum for all Reason8 Web Builders, so please add your comments or questions and let's get chatting!!

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');