|
| |
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, readability, 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
tabular materials they were intended for. It is much cleaner to use
spacing, alignment, and indents to delimit tabular 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
| |
 
|
