HTML layout with tablesTables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table. This table has 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
This HTML code...
|Left menu Item 1 Item 2 Item 3...||Main body|
|Left menu |
HTML layout with DIV, SPAN and CSSAlthough we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.
The div element is a block level element used for grouping HTML elements. Once grouped, formatting can be applied to the div element and everything contained within it. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.
Using our previous HTML layout, we can use DIV and CSS to achieve a similar effect. The following code...
HeaderLeft menu Item 1 Item 2 Item 3...Main bodyFooter
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 LayoutsAs 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