Website Layout - CSS or tables

The basics of Website Layout

Website layout best practice

Keep your masthead and footer the same on all your pages.
Keep your navigation in the same place on each page.
Navigation is usually in the masthead or on the left (under the masthead), or both depending on the amount of content you have.
Keep blocks of text (paragraphs) small and easy to read.
Give 5-10 pixels spacing (cellspacing) between main sections of content.
Ensure your homepage leads logically into the different areas of your site.
Don't make your pages too long.
Use common sense - step into your visitor's shoes.

example template The templates which you get from the Web Page Design Club are high quality layouts with professional graphics and 2-column or 3-column themes.

As you can see you should have separate blocks for header, footer, navigation elements and main content. By getting these templates you will have a much better understanding on how to structure your website with a professional layout. You can then modify them to suit your own needs or theme. These templates come in both Wordpress and CSS formats. In fact there are few other sites which offer such quality templates just for joining free.

Get 5 Professional Website Templates FREE!

Just for subscribing you will get 5 high-quality templates which you can download, use yourself, use for your clients, or even resell at your own price.

* Your name and email address will not be sold, shared or disclosed to anyone. We promise to respect your privacy

How to control the layout on your web pages

A web browser can read a number of types of file, Portable Document Format (.pdf), Text (.txt), Macromedia Flash (.swf) etc... but the most commonly used file type is Hyper Text Markup Language, HTML (.htm, .html).

Assuming that you are building a normal site with HTML, lets look at the 3 ways you can format it.

Using Tables

Using CSS (Cascading Style Sheets)

Using Frames

Using tables is the safest way to ensure your site looks the same in all browsers. However if you can invest the time in setting up CSS correctly, this is a much better option, since you can control the layout and format of all elements on your webpage, on all webpages in your site, from changes in just one file.

Web designers are increasingly using CSS as standard to both format and position elements on a web page however tables are usually used in conjunction with CSS, therefore you should know how to control both.

When designing your site you need to ensure that your navigation is in a consistent place on all pages.

Flash should not be used to create the layout of your webpage, because it is usually not search-engine friendly, however using Flash files within your layout can greatly enhance the visual effectiveness of your pages.

The next few pages (follow links at bottom) show you in more detail how to control the layout on your website. Frames do have a role to play in some situations, and therefore we also show you how to use them, but my advice is to spend a few hours understanding how to use CSS. CSS will give you such good control on the layout of your pages that you will never look back.

If you are new to HTML, take 5 minutes to read the HTML tutorial before learning about CSS. Even if you are not a technical person you should try and understand HTML, as this is the presentation layer that displays your web content to your prospective customers.

HTML controls the presentation of your web pages. Even if your site uses XML, ASP, PHP, CFM or other dynamic code, it will almost certainly use HTML for presentation of the content.

Using CSS

Using Tables

Using Frames