Programming & construction	HTML	WYSIWYG editors (in development)	Interactivity & animation (in development)	Web applications (in development)	Implementation (in development)

Page Layout

The layout control inherent in HTML is virtually non-existent - think of a very basic word processor with left, centre, right alignment, and the ability to wrap text around images. Then consider the fact that the text display size may vary considerably from browser to browser, depending on platform, software and user settings, and it is clear that the control of the final page display is quite limited.

A widely used ‘workaround’ for this is to place content into table cells to hold it in place on the page.

Tables

Table cells may be treated as individual layout areas, with the ability to vary alignment and background colours, they may also be combined or divided to accommodate the content.

Example

Tables used for layout purposes may be difficult to interpret for viewers using screen readers or browsing without graphics — they can be identified as layout tables using the ‘name’ and ‘summary’ attributes, eg:

<table width="100%" name="navigation" summary="layout table contains navigation links">

To find out more about making web design accessible, go to the module on Accessibility in Web Design.

Layers (the DIV tag)

Another mechanism for positioning page elements is the <DIV> tag.

DIV tags (called ‘layers’ in Dreamweaver) allow absolute or relative positioning for blocks of content, even layered over each other. Current HTML standards deprecate the use of tables for layout, in favour of the DIV tag, but it must be said that rendering of some DIV attributes is still inconsistent between browsers, so layout tables are still widely used.

Some positioning of elements may also be set in style sheets (in combination with the DIV tag).

Now find out about style sheets (CSS) >