Spotlight your WebPageswithTables.

When you build a website with lots of different information, much of it could be missed or ignored if it's all grouped together in one big paragraph. Images are a very effective way of breaking up paragraphs of text and certainly add aesthetics to any web page, but sometimes certain pieces of information need to be given a stage of their own. Your DotGO Website Editor allows you to layout your pages in various formats by using the simple Table Editing facility.

Tables can be placed anywhere on your page within and around existing content. They also allow you to position text and images separately and independently. As you can see here, you can set a table to sit to the left or right of your main body of text. You can set both the width and height of the table to accommodate its content and to allow it to sit nicely with the rest of the content on the page. Special Offers are a common requirement on a website, so lets look at the various ways you can highlight this information.

Special Offers

A special offers area will grab attention in the top right of the page. Firstly, as the eye naturally goes to the right on first viewing a page, its going to stop people in their tracks to see what’s on offer. And lets face it, we all like a bargain so it would be very hard to ignore. It will highlight the products and prices easily and you can even set links to relevant shopping basket items or other pages to provide further information.

Being in a separate table will also make it very simple for you to keep this area updated, adding and changing products to keep visitors coming back to see what other bargains are to be had!

To set a Table top right of your page, on a page with existing content, place your cursor in
front of the first word of the first paragraph. Now click the Insert Table icon.

In the Table properties window:
* Select the number of rows you need x 2, dependant on the number of special offers you have then double it to allow a row between each. (Don’t forget you can always add more later)
* Select no more than 2 columns and ideally, the second column should only be used for prices or information of no more than 4/5 characters (it can’t be too wide otherwise it will dominate the page too much).
* Select a Border size – a fairly narrow border would be best for this purpose.
* Select “Right” for the Alignment.
* Next to Width – select 25 – 35 percent.
* Caption – Add a Caption, such as “Special Offers”
Click Add to Website.

At any time you can right click the table to; access Table Properties, add / delete rows, edit individual cells, cut, copy and paste. To add rows in specific places, right click from a particular row and select “Row” > Insert Row before or Insert Row after.

You could set an image in the top row to offer a visual idea of what products or services the special offers are for. If you’ve set the table with 2 columns, join the two top cells together by right clicking in the top left cell > Cell > Merge Right. This will remove the column line in the top row allowing you to centre align an image nicely.

Now enter the information for your first special offer, in a Font Size of Medium and remember to keep it short. Too much information will result in rows of text in each cell. You can link to shopping basket items, groups or product pages to provide your visitors with further information (see tutorial blog) but this table is only supposed to give the most important information: Name and Price.

The rows between each special offer are there to separate each one from the next and one of the best ways to do this is by setting them in a different colour. The rows holding the offer information are best left white, as they will then show up better against the coloured dividing rows. Pale colours work best, especially Pale Grey.
Right click in the first divider row and click: Cell > Cell Properties > Background Colour > Choose from the colour chart > Add to Website > Add to Website.
If you’ve set the table with 2 columns, join the two row cells together by right clicking in the left cell and go to: Cell > Merge Right. This will remove the column line and your chosen colour will run across the whole row. Do this to all your divider rows.

To make the information easy to read, set all the text in the same font, size and style.

If you are going to create links from your special offers to your shopping basket or other pages (see tutorial blog), add an instructional line such as “Click for further details” underneath your image in the top row or just in the top row so customers know exactly what to do. To get this line immediately underneath the picture, place your cursor to the right of the image, and then hold down your shift (Arrow up) key while you click return. You could also add an extra line at the bottom of the table to explain how long the special offers will be available.

To add colour to all the lines on your table including the border, wait until you’ve finished then select the whole table with your mouse and go to Cell > Cell Properties > Border Colour > Choose from the colour chart > Add to Website > Add to Website. Play around with the colours and borders until you're happy. Now that you're a table expert, why not see where else a table could improve your page design.

Find out more about us

We have been in business since 2003. Back when the founders of Facebook were still in college, we were writing code and helping our users create great websites.

Affordable business website design

If you need help, why not check out our huge selection of videos, step-by-step guides and knowledge papers.

UKs most trusted

We have helped many thousands of our customers create great looking websites. Take a look at a few examples, created using our website builder.