HTML Layouts

You may have noticed that most websites have multiple columns in their layout - they are formatted like a magazine or newspaper. This page demonstrates how this is done (and how it used to be done).

HTML layout with tables

In the early days of the web, tables were a popular method for achieving advanced layouts in HTML. Generally, this involved putting the whole web page inside a big table. This table had a different column or row for each main section.

For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the header and footer column spans both columns (using the colspan attribute):

CodeResult

Header
Left menu
Item 1
Item 2
Item 3...
Main body
Footer

HTML layout with CSS

Although we can achieve pretty nice layouts with HTML tables, tables weren't designed as a layout tool. Tables are more suited to presenting tabular data. In fact, the W3C heavily discourages using tables for layout.

HTML has a number of elements that can be used instead of tables. For example, the main, header, footer, and article tags were introduced in HTML5 for the specific purpose of determining a website's layout. Also, the div element is a generic block level element that can be used for grouping HTML elements. Once grouped, formatting can be applied to the element and everything contained within it.

Using our previous HTML layout, we can use various HTML5 elements (along with CSS) to achieve a similar effect. The following code...

CodeResult

Header
Main body
Footer

One change to this that I'd recommend is that you place the CSS into an external style sheet.

One major benefit of using CSS is that, if you place your CSS in a separate location (i.e. an external style sheet), your site becomes much easier to maintain.

Advanced Layouts

As you build more websites you'll be able to develop more advanced layouts.

Because advanced layouts take time to create, a quicker option is to use a template. Web templates are basically a pre-built website that enables you to customize as required. To see what I mean, check out these free website templates.

Enjoy this page?