Internet Explorer 3.0
Enhanced Tables: Step By Step

Follow the instructions below for an introduction to how you can enhance your HTML tables for use with Internet Explorer 3.0!

Step 1: Try a background graphic.

Internet Explorer 3.0 can place a background graphic behind any table cell, or even behind an entire table. This is a great boon for designers who want to overlay text on graphics. The HTML is simple: just add BACKGROUND="address of picture" to any <TABLE>, <TD;>, or <TR> element in your table.

Here's a table that uses background images to place a patterned border around a central cell:

What gives Volcano Coffee
its rich, deep aroma and
tastebud-tingling bouquet?
It's the beans, stupid!

And here's the HTML code. Note that we have used not only background images but also background colors; this gives the viewer something to look at while the images are being loaded.

<TABLE BORDER=0 CELLPADDING=10 CELLSPACING=0 BACKGROUND="beans.gif" BGCOLOR=#572B00>
<TR> <TD COLSPAN=3 HEIGHT=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD> </TR>
<TR>
<TD WIDTH=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD>
<TD>
<FONT COLOR=#ffffcc>
What gives Volcano Coffee<BR> its rich, deep aroma and<BR> tastebud-tingling bouquet?<BR> <B>It's the beans, stupid!</B>
</FONT>
</TD>
<TD WIDTH=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD>
</TR>
<TR> <TD COLSPAN=3 HEIGHT=10 BACKGROUND="canvas.gif" BGCOLOR=#E8CCA0></TD> </TR>
</TABLE>

Background images in table cells can be transparent.


Step 2: Control the rules.

If you want to specify that your table should only have rules (borders) between the rows, use the following:

<TABLE RULES=ROWS>

If you want to only have rules between the columns, use RULES=COLS instead. For a table with an outside border but no rules, use RULES=NONE.


Step 3: Want to align text by baseline?

Here's what happens in an ordinary Web browser when you try to use text of very different sizes in adjacent cells:

Q4 '96 Profits Sept Oct Nov Dec

The results look a little odd because the baselines of the text are not aligned. Internet Explorer 3.0 corrects this problem by allowing you to add VALIGN=BASELINE to any <TD> tag. Here's the same table with the text aligned by baseline:

Q4 '96 Profits Sept Oct Nov Dec


Congratulations!

You've just learned three simple ways to enhance your tables for use with Internet Explorer 3.0!

UpBack to the HTML Authoring Features page

© 1996 Microsoft Corporation