Laying Elements Out on a Page

There are two general approaches for HTML page layout. The first method uses HTML Tables for laying out elements. The second uses absolute elements, which employs cascading style sheet (CSS) attributes to position elements. The two approaches can often be used conjointly.

HTML Tables

Tables in the classical sense are used to display spreadsheet-like data; however, tables are also useful for controlling page layout, as HTML itself offers very little control.

The untrained eye might not see the table for all it is worth, but the HTML expert will immediately notice that a table can be used to position all content on a page.

As a primitive example, consider the following layout:

If the table border was visible, we would see this:

As you can see, a simple table with 2 rows and 2 columns is being used.

The advantages of using Tables for layout are as follows:

• Tables can be controlled quite precisely, even down to the single-pixel level
• Browsers handle tables pretty consistently
• By nesting tables, you can code just about any design you can imagine (as long as it's a combination of rectangles)
• The fact that they're widely used means they're widely understood, making maintenance less of a problem
• In many cases, there's really no alternative

The following concepts are important when working with HTML Tables:

• <TABLE>, <TR>, and <TD> tags (see HTML Basics / Tables)
• Align and valign attributes, which determine the alignment of content within cells
• Background colors and/or pictures in tables, table rows, and table cells
• Border, bordercolor, and frame attributes of a table
• Table and cell width, which can be expressed in pixels or percentages
• Cellpading and cellspacing attributes

Sometimes, you may prefer to use an external program to help you with laying out HTML tables. For example, Macromedia's Dreamweaver offers something called layout view, with which you can draw your page using tables as the underlying structure, but avoid the traditional difficulties of using tables.

Many graphics programs, like Adobe ImageReady or Macromedia Fireworks, also offer a slicing tool or wizard. Graphic designers will often draw the layout of an entire web site as one image, and then use an image-slicing tool to create an HTML page. Slicing tools can automatically create the appropriate HTML tables and split a large image into several smaller images as appropriate.

Please note, RPGsp does a great job of integrating with external designers and tools. See Integrating RPGsp with Other Environments.

Absolute Positioning

Absolute positioning lets you arrange elements using an invisible x and y pixel grid, instead of the tradition top-down HTML approach.

Absolute elements are removed from the normal HTML flow and positioned using style sheet attributes. The position of an absolute element is specified in pixels from the top and left sides of the document. To move any absolute element in the RPGsp designer, simply drag and drop it with your mouse.

See Using Absolute Positioning.

Profound Logic Software, Inc.
www.ProfoundLogic.com
(937) 439-7925