HTML is hardly an arcane skill--you can

Advanced HTML

HTML is hardly an arcane skill--you can visit the nearest bookstore and find dozens of how-to books that will get you started. Better yet, sites all over the Web--including this one--explain the basics for free. Every detail of HTML can be found in references and specifications scattered across the Web.

But putting together Web pages--especially pages designed to be viewed on more than one brand of browser--demands a bit more. In theory, HTML is a standard. But the specifications and references tell you only how the various tags and attributes should work; not how they actually do work. Different platforms and versions of Web browsers seldom agree on how to render a given piece of code. And a lot of good HTML practice is based on the needs of the Web reading public, and can be learned only through trial and error.

We've tried. We've erred. And now you can learn from our mistakes. The 30 tips collected here--including hints on tables, layouts, cross-browser compatibility, working with white space, and avoiding hidden bugs--are the result of our extensive experience putting together BUILDER.COM and other CNET Web sites. They're designed to spare you the hassles of learning the hard way.

1. Tame your tables

Even if you're an only modestly experienced Web page author, you've probably used tables to arrange your pages. And you've no doubt bumped up against the fact that tables were never meant for layout. While simple to assemble, tables are notoriously difficult to coerce into the precise dimensions and appearance you want.

Part of the problem is that existing HTML specifications don't dictate the exact rules of how a browser should render text. There's nothing in HTML about specific typefaces, kerning, line spacing, and the like. But if you understand what the browser is thinking when it deals with tables, you can take steps to ensure that the final results bear more than a passing resemblance to your original design.

Control columns

Suppose you wanted to create a simple two-row, three-column table with overlapping cells, like the one below:

You would expect the following code to produce it:

<TABLE width=300 bgcolor=#ffff99

border=0

cellspacing=0 cellpadding=0>

<TR>

<TD colspan=2><IMG src="image.gif"

width=200 height=50></TD>

</TR>

<TR>

<TD colspan=2><IMG src="image.gif"

width=200 height=50></TD>

</TR>

</TABLE>

What you actually get, however, is quite a bit different. That's because the center column didn't get it's own <TD> tag.

There are two things you can do to fix this table. One is to break it up into two separate tables and remove the colspan attributes. This will make the widths unambiguous. If you really need to keep the table whole, the surest solution is to establish all the columns in the first or last row of the table. For the above example, try adding the following code just before the </TABLE> tag:

<TR>

</TR>

Note that the middle cell can't be empty, since Navigator might collapse it. One trick is to create a "dummy" row containing a transparent image or <SPACER> element one pixel high. If the establishing row is the last row of the table, as in the above example, the cell in the spanned column must have a width attribute or <SPACER> content for the table to work on all browsers.

Leave columns alone

Once you've established a column's width in one row, width values in later rows are usually ignored. This means you can omit the width attribute from subsequent cells in that column. You'll save time and file size.

Sometimes you won't want to establish a column's width at all. A column that contains only wrappable text and no width attributes will resize itself up to the limits, if any, of available space. This can be useful given the variability of text size across browsers.

But problems arise when you give a table both fixed- and nonfixed-width columns: nonfixed-width columns with more space than they need can cause fixed-width ones to widen. There are two solutions to this.

If only one column is supposed to be nonfixed (say, in a relative-sized table), give it a width=100%. The fixed columns will retain their set widths, and the nonfixed one will expand to use up what's left.

If you want two or more nonfixed columns to total a specific width, combine them at least once in a single fixed-width cell.

<TR>

<TD width=200>This column is 200

pixels wide.</TD>

<TD>This column has no fixed

width.</TD>

<TD>Neither does this one.</TD>

</TR>

<TR>

<TD colspan=2 width=300>But together

they're 300 pixels wide.</TD>

</TR>

</TABLE>

One more reason to be careful with cell width is that Navigator 3.0 will stick to the specified width even if the cell's contents are wider. This can result in a cell's contents overlapping its border:

So be sure to set a cell's width to an adequate size for any nonwrappable content, or else omit width altogether.

Restrain rows

Suppose you want to create the table shown below:


	Extra space

You might expect the following code to do the trick:

<TABLE cellspacing=0 cellpadding=0

border=1>

<TR>

<TD rowspan=2><IMG src="red.gif"

width=50 height=150></TD>

<TD height=50><IMG src="blue.gif"

width=100 height=50></TD>

</TR>

<TR>

<TD align=center>extra space</TD>

</TR>

</TABLE>

However, what actually happens is that the bottom cell shrinks to fit the text it contains, and the blue cell--despite being set to height=50--is stretched vertically.


	Extra space

The problem is that the height attribute specifies a minimum, not a maximum, and a row defaults to the height of its tallest cell (determined either by the cell's contents or its height value). That's why the table above doesn't work as intended--the text in the last cell isn't tall enough to force the desired effect. Since we can determine the exact height that we want in that last cell (by subtracting the height of blue.gif from the column height), giving it a height=100 attribute will make it the proper height.

If you don't know the exact height--because other columns contain text, say--you may be better off removing the rowspan attributes and using a nested table instead. The nested table will size its rows based on their content only.

Rowspans made easy

HTML 3.2 specifies that if a cell's colspan implies more columns than have been created up to that point in the table, the browser should create the additional columns. All of the major browsers follow this rule. With rowspan, however, the specification states that browsers shouldn't create any extra rows. The existing browsers follow this rule as well.

So if you have a cell that spans vertically to the bottom of the table, past rows that might vary in number or are too large to easily count, just give it a rowspan that you know is excessively high.

In the example below, we've set rowspan to 99. Even though there are only seven rows in the actual table, your browser won't generate any extra rows:

doesn't

matter

how

many

rows

are

here

<TABLE bgcolor=#ffff99

border=1>

<TR>

<TD width=10 rowspan=99

bgcolor=#cc3333> </TD>

<TR><TD>doesn't</TD></TR>

<TR><TD>matter</TD></TR>

</TABLE>

Baseline your text

If the cells in a row contain text at different sizes, aligning the baselines can be tricky. Setting the row to valign=bottom works easily enough. Any wrapping text will move upward, and the text will remain aligned along the bottom baseline. The code below:

<TD><TT>I've hit bottom.</TT></TD>

<TD>Me too, but<BR>I'm taller.</TD>

</TR></TABLE>

produces the following table:

I've hit bottom.

Me too, but I'm taller.

Things get trickier when you want to align wrapping text along the first line's baseline. The attribute valign=baseline is supposed to do the job. However, your results will vary from browser to browser; Navigator 4.0 treats it the same as valign=bottom if a cell's height is set, while Internet

Explorer 3.0 might overlap a cell's content with its border.

The solution is to set valign=top and accompany the smaller text with a nonbreaking space ( ) set with the largest font in that row:

<TD>I like this attribute,<BR>

so I use it a lot.</TD>

</TR><TR valign=top>

<TD><TT>dynsrc</TT> </TD>

<TD>This one displeases me.<BR>

I reject it.</TD>

</TR></TABLE>

This effectively standardizes the text height on the first line of every cell, as shown below:

alt	I like this attribute, so I use it a lot.
dynsrc	This one displeases me. I reject it.

Fill cells for Navigator

Because Navigator tends to collapse empty cells and refuses to render a background color in a collapsed cell, each cell in a table has to contain something--at least a nonbreaking space, a transparent image, or a <SPACER> element--if you want that table to have a background color.

For instance, the code below:

<TR>

<TD width=100>The middle cell should

yellow.</TD>

<TD bgcolor=#ffff00><IMG

src="blank.gif"

width=100 height=1></TD>

<TD width=100>A small GIF is there to

make

sure.</TD>

</TR>

</TABLE>

produces the following table:

The middle cell should be yellow.

A small GIF is there to make sure.

Many Web builders prefer to use images to prevent cells from collapsing, since some browsers don't support Netscape's propietary <SPACER> tag. If you decide to use a single, resized image to fill out your cells, be sure to set both the height and width attributes. If you set only one, many

browsers will resize the image proportionally, which is probably not what you want.

Centering tables

Most HTML references claim that you can center a table by setting the <TABLE> tag to align=center. While this certainly does no harm, it also doesn't work on anything up to and including the 3.x browsers. On Navigator 4.0, setting align=center will center the table--as well as any text

immediately preceding it. You're better off just centering the table in the <DIV> tag so it will work with other browsers as well.

The code below:

<TR><TD align=center height=60>This

table uses

align=center in the <TABLE> tag.

Is it centered on your

browser?</TD></TR>

</TABLE>

<TR><TD align=center height=60>This

table is

nested in a <DIV> tag.

Is it centered on your

browser?</TD></TR>

</TABLE>

</DIV>

produces the following tables:

This table uses

align=center in the

<TABLE> tag. Is it centered

on your browser?

This table is nested in a

<DIV> tag. Is it centered on

your browser?

2. xxxxxxxxxx

fasdfasdfasfasdff