What is the problem?
HTML (Hyper-Text Mark-up Language) was designed to allow information from different sources to be linked together. It was not designed as a method for creating pretty documents. In fact, how a page is displayed -- the size of the type, where lines are split, etc. -- is left up to the browser. Different browsers are free to render the pages differently. This was a conscious decision by the designers. The basic purpose was to link information; how that information was presented to the viewer was considered less important.
As a website builder you probably are concerned about how your pages look. This is not a simple problem since different browsers will show your pages differently. One of the more difficult problems is getting things to line up vertically the way you want them. I learned the method explained here by looking at the HTML produced by Yahoo! PageBuilder.
Using Tables to Control Format
Although you will never achieve precise control of the look of your page for all browsers and screens, you can come close by using tables. Most browsers handle tables well enough that, with proper usage, you can make the page look the way you want most of the time.
The layout concepts are fairly easy to grasp if you understand the way HTML tables work. A table consists of rows of data items. A table column consistes of all the data items that are in the same relative position on each row, e.g., the second data item in each row. An HTML table is assumed to have the same number of data items on each row. The width (on the display) of a data item is determined by the width of the widest data item in the same column. Likewise, the height of a data item is the height of the tallest data item in the same row. If you have followed this description you will realize that a table creates a pattern of horizontal and vertical lines which divides the display into rectangles.
Controlling the lay-out of the page boils down to controlling the width of each column and the height of each row.
Even though the table makes a virtual grid pattern on the page, your page doen't have to look like a spread-sheet. You can make a data item span more than one column and/or row. For example, to make a data item be as wide as 3 columns you do this: <dt colspan="3">.
I will explain how to do this in a managable way.
Step 1 - Plan ahead
The first step is to determine the number of columns you will need. You must know what data you plan to present on the page and you should know the size of any graphics you want to show. You may use a pencil and paper to draw the rough layout of your page.
Now draw horizontal lines where the top and bottom edges of data items occur. On each of those rows that you have created, mark the right the left edge of any data items on that row. Treat each row separately -- the left and right edges on one row need not line up with the left and right edges of data items on a different row. If you want them to line up then do so but only if you want them to line up.
Draw vertical lines from the top of your page to the bottom of the page through each of the left and right edge marks that you made. These lines are the edges of the columns in your table. The columns are the spaces between those lines. Count the columns. You will need this number when setting up your lay-out table.
Now define the table's horizontal layout by using a dummy row. Use a single-pixel .gif file as a place-holder. For example, this page uses a table defined like this: <table border="0" cellspacing="0" cellpadding="0" width="600"> <tr> <td><img src="../images/c.gif" height="1" width="70"></td> <td><img src="../images/c.gif" height="1" width="250"></td> <td><img src="../images/c.gif" height="1" width="200"></td> <td><img src="../images/c.gif" height="1" width="80"></td> </tr>
The first line defines a borderless table with a width of 600 pixels. This width is accomodated by most screens.
Define one row (<tr>...</tr>). Using the single-pixel .gif file as a place-holder we define one data item for each column. The height of each data item is always "1". The total of the widths of these data items should match the width of the entire table. You can just guess at the width of each of these data items for now. When the page is complete you can adjust these to move elements of your page.
Step 2 - Code the body of your page
Look at your paper drawing of the page lay-out. Start at the top and go down one row at a time. (I will assume that all elements occupy only one row. If you have a more complex lay-out you will have to extrapolate these instructions for handling the row heights.) The first data item on the row should be defined with the maximum height of any element on the row. That way you have only one place to look to adjust the height of a row. If the horizontal layout of the row contains fewer elements than the number of data items you defined on the dummy row then some of those elements should span more than one column.
Example - this page
This page is quite simple. I needed one column for the left margin; the header needed separate data items for the website name and the page title; and a final column is for the right margin. A spacing row (to put some vertical space between rows) looks like this: <tr> <td colspan="4" height="2"></td> </tr> The height value is the number of pixels of vertical "white space" that you want.
The first row is layed out like this (actual content removed): <tr valign="top"> <td height="58"></td> <td valign="middle" align="center">...</td> <td valign="middle" align="center">...</td> </tr> Note: the first data item defines the height of the row and envery element on the row only occupies one column. Also note that I didn't bother defining a data item to occupy the last column -- that's allowed.
The more interesting row defintion is the one in which this text appears: <tr> <td></td> <td colspan="2"> ... </tr> Note that I did not define the height of this row. I let it expand as needed. The text itself is in the second data item which spans the second and third column as defined by our dummy row definition.
This example is very simple and you may wonder why you make the effort to define the lay-out like this when the page is so simple. When you decide to add more elements to the lay-out of the page you will see how useful the method actually is.
Step 3 - Make adjustments
Now that all the elements of the page have been coded, look at the page. If something is not positioned correctly from left to right, adjust the widths of the data items in the dummy row at the top of the table. Remember to subtract the same number of pixels from an adjoining data item when you add pixels to a data item so the total still stays the same.
I learned this method while in the process of building this web site so some, but not all, of the pages are examples that you could look at. I hope you find this useful.
