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
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,
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
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
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
Webpage Layout with Tables
Copyright, contact information and links
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.
Website Logo here
Common Links Here
Search box here
Copyright, contact information and links
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!