Basic Tables
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.
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.
| North | South |
| East | West |
| North | South |
| East | West |
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.
You can use tables in creative ways to help achieve effects that you may want to incorporate into your web-publishing efforts. There are a number of design challenges for which tables provide the solution.
One thing you can do with tables is take a composite image and split it into pieces, then re-combine it in the cells of table. This is useful for creating wrap-around effects or image captions. The following example is shown with borders off and borders on to illustrate how the table is formatted.
 |
|
|
It is possible to approximate wrapping text around a graphic by splitting the image into two parts and combining the images and text in a table. |
 |
|
|
|
It is possible to approximate wrapping text around a graphic by splitting the image into two parts and combining the images and text in a table. |
|
|
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. |
Frames allow you to display multiple HTML documents on a single page. There are quite a number of practical uses for this functionality. However, frames-based pages behave differently than regular pages because frame-based documents are not HTML documents, but rather meta documents which call and display HTML documents. A frame page contains no body HTML tags, only the parameters for the frames and the URLs of the HTML documents designated to fill them. Because of this frames can sometimes yield unexpected results, particularly when using the Back button. If you have been navigating within a frame and then press Back, you will go back within the frame instead of going back to the previous page. But despite their unpredictability and aesthetic limitations, frames provide a functionality that is appropriate for certain content, and that can greatly facilitate site maintenance.
Frames for flexibility
One type of site suited to frames is one whose contents are expected
to change frequently. Because you can design a frame-based site to have
one file for navigation, if you expect to add or remove pages you will
only have to modify that one file. This site, for example, requires a number
of files to be changed if a page is added or deleted because each page
has a navigation column. If we had used frames we would have had a single
file for the section menu, and when we needed to add a page only that file
would have had to be changed to reflect the addition. As it is, when we
add a page to a section we must edit each file in the section to add the
new link to the navigation column.
Frames for functionality
Frames can provide a certain functional coherence to a targeted area
of your site. Say your site contains, among other things, a collection
of Frost poems. You could create a virtual "reading room" for his poetry
using frames, with the left-most frame providing the navigation links and
the main frame displaying the poems. Visitors would most likely go to this
area and stay for a time, and do their navigation using the links you provide,
so the quirky navigation of the Back button would not be too intrusive.
You can also use frames to provide additional interactivity to your page. Frames allow you to put a page up on the user's screen and change its contents without actually rewriting the entire screen. The frames can interact; clicking a link in one frame can change the contents of the other. For example, a text with annotations in one frame can be linked to a footer frame, and clicking on the text reference fills the footer frame with the corresponding note.
Frames for interactivity
Frames can also allow users to choose their content. This is particularly
significant when working with large files. Say, for example, you have a
movie file that you would like to put on your page with other elements
such as text, but rather than force the user to download the file you want
the download to be optional. If you simply include the HTML tag for the
movie on the page with your other page elements, the movie will download
automatically with the page. However, if your page is a frameset, you can
designate an area of the page as the movie space and give the user a link
to click if they wish to download the movie into that space.
Aesthetics
Many page designers have not used frames because of their prescribed
borders and limited flexibility. However, the current versions of browser
software allow many more frame parameters to be defined. In fact, frame
borders can now be set to zero. This allows you to design using the functionality
of frames without requiring them to be visual and perhaps inharmonious
elements on your page.
Use this HTML Cheatsheet to assist
you with building pages.