Contents
Page Design
The content of this style manual is all contained in invisible tables to allow us control over the layout of the pages. Without tables, text and graphics are essentially poured onto the user's screen, with the actual layout of pages depending entirely on the width and height of the browser window. All of the issues of legibility, readibility, and style that we have discussed in this manual rely on the ability to position words, images, and screen elements on the "page" in a way that adheres to established typographic conventions. Because of the limitations of HTML, the only layout tool for site designers at this time is tables.
Using tables for page layout
Tables are currently the only HTML option for page layout. If you simply place a chunk of text on a page, the length of the lines is determined by the dimensions of the viewer's browser window. When the user resizes their window, the text reflows to fill the new space. Though some may consider this a "feature," it actually hinders the user's experience with the content. The conventions of print give us a comfortable place to access content. Without some adherence to these standards you may discomfit and ultimately lose your readers.
To avoid this use tables to define the areas of your pages. Use table cells to create margins, put your text in table cells to limit the line length (ideally 10 to 12 words on a line), and use cells to position elements on the page.Cell attributes and table dimensions
The behaviour of a table depends largely on how its cells are defined. For the purposes of page layout you should define cell widths with absolute values. Additionally, the cell should contain a single-pixel GIF equal to the width of the cell to make sure that the table dimensions do not change when the browser window is resized.
Page with table examples
No borders, please!
When we talk about tables we are not speaking of the beveled beauties that HTML offers for the presentation of tabular content. We are using tables to get around the limitations of HTML, and we are using them in ways in which they were not intended. These are invisible tables whose sole purpose is to give us control over page elements, so be sure to set BORDER="0".
While we're on the subject, table borders are ugly and unnecessary even in the context of the tabluar materials they were intended for. It is much cleaner to use spacing, alignment, and indents to delimit tabluar information.Lorem ipsum |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| Duis autem | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Lorem ipsum | | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. |
| Duis autem | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Gutters
In print the space between columns is referred to as a gutter. You can use tables to create gutters, either through 1) adding a cell that serves as the gutter, or 2) by using the cellpadding (space between cell contents and cell) or 3) cellspacing (space surrounding cell) attributes.
| 1 | |
Table with cell gutter |
| 2 | Table with cellpadding = 8 |
| 3 | Table with cellspacing = 8 |
References
|
Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books. www.killersites.com |
