It is very important for your websites to be user-friendly and have a good web design. One of the major factors of user-friendly websites is their good layout. A proper layout will help users to get the required information quickly and navigate between the web pages easily.

Apart from the layouts, the page-backgrounds, text-colors, font-size, banners and images play a great role in making a good looking website. You may like to visit website design consideration section for complete information on website designing.
The simplest way to create a good website layout is by the use of tables. Although layout with CSS requires less coding and the web designers are shifting from table layout to CSS layout slowly, for beginners, layout with tables is still the simplest way and a significant number of websites today use table layouts. In this case, you only need to know about the basic HTML and HTML tables. If you are not familiar with HTML tables, it’s a good idea to go through HTML Table Tutorial first.

Website Layouts

You may have noticed that most of the websites today have the similar layouts: A header for banner and common links, footer for copyright information or additional information and two to three columns in between - first narrow column for navigation, second column for descriptions and an optional third column for website promotions, advertisements, etc.

Webtutorialplus.com also uses the same basic layout. However, you may think differently and come out with a completely fresh idea. You may consider visiting the websites you like most to get some basic idea of layout. Where do they place their actual content, how about navigation, is the front page layout and other pages layout same or different? These questions will help you out with a clear idea for the layout of your website. You should also visit the websites which are of similar nature and note down what you like most about them and what you will like to avoid in your website. Think about your website – is there something you want your visitors to focus on?

Once you have made up your mind, get a bunch of papers and sketch pens. And no, computer will not work here, it is recommended to use physical papers. It's always convenient to draw sketches on paper and make modifications so that you reach out to the layout of your choice. After you have frozen your layout, we are ready to go!
We will start with the same basic structure – three columns layout and use table layout method to create this. Here is the sketch we will be working on:

Creating basic layout

It's quite easy to create the basic structure of this layout with tables. Here is the code:

As you have noticed, we have used nothing more than 'colspan' and 'style' attributes in a basic table for creating this layout. If you are familiar with html table, it is not at all difficult to understand this code. With ‘colspan’, we make the table cell span multiple columns. Now that our basic layout is ready, in header section, we will create the sections for website logo and common links. This is achieved by inserting another table inside the ‘header cell’. We will again use our same basic table with ‘rowspan’ attribute here for this purpose. Insert the following codes in the 'header cell' replacing <h1>Page Header</h1>. Now the layout of the web page looks something like this.

This makes your basic table layout ready to use. With this, you have got an idea on how to nest a table inside another. It should not be difficult for you now to make simple changes in the tables structure to achieve the layout of your choice.

Now, you should think of various types of page layout and play around with the placement of tables to create these. Have a look to the websites your like – can you create something like that? The more you practice; the better will be your understanding on use of tables for layouts.

We will discuss the website layout creation with CSS in CSS tutorial section. CSS gives us the real power to place the contents exactly where we want and requires lesser code. However, it is not a bad idea to create layout with table first before we get into this CSS thing!