Tables--the Web Designer's Best Friend

Before Tables came along, Web page designers had very little control over the placement of design elements. Now that we can place text and graphics in table cells, we can create attractive page formatting that appears virtually the same in all modern browsers.

Of course, some day we'll all be using Cascading Stylesheets for formatting, but that day will not come until all Web surfers are using browsers that understand the latest stylesheet codes--which will probably be a year or more in the future. Besides, I notice that the folks who use stylesheets to create e-commerce Web sites rely heavily on tables for structural design.

Flex Tables

You will never be able to predict exactly how your pages will look on the viewer's browser. What size monitor your pages will be viewed on? Some Web surfers still use 14" monitors - others will have 21" monitors! Today, some folks even surf the Web on hand-held devices and digital phones! Mac and PC monitors interpret font sizes differently. And users can even change the typeface and the size of the fonts displayed on the monitor to suit their preferences or to accommodate low vision. So you have to design your Web site so that it looks good (or reasonably presentable) on any platform and any size monitor.

You can solve this problem to a large extent by making your tables flexible, so that they expand and contract to suit the size of the user's browser window. This means that you would not define tables or table cells as a fixed width (a certain number of pixels). You would define the width of each element as a percentage of the whole. See "Table Width - Pixels & Percents" to see the syntax of both types of coding.

This aspect of Web design is complicated. But Stephen Poley explains it all in his excellent tutorial, "Flexible design of web sites." You can see that Stephen knows what he's talking about. Try stretching and then shrinking the width of your browser window. You'll see that the text and graphics and text adjust appropriately. Good flexible Web design!

Using color in tables

Newer versions of Netscape and Internet Explorer permit coloring individual cells or setting a background color for the entire table that can be overwritten by a background color tag in any individual cell. IE3, NS4 and later browsers additionally permit coloring the border of the table, even assigning a background graphic to the entire table or a single cell--in exactly the same manner as you assign a background graphic to an HTML page!

"Something about the Eyes" is a Web page I designed to take advantage of this colored-cell feature  The text is in a table whose top and bottom rows contain a graphic representing the rounded "end caps" of the background design. The color directly behind the text is provided by a background color tag (bgcolor="#ffcc66") in the table cell, which just happens to be the exact same color used in the end cap graphics (GIFs). Newer browsers, therefore, will show a solid block of color behind the text, capped with rounded corners; older browsers will display no color at all behind the text, though they will display the end-cap graphics at top and bottom.

Use such features as colored table cells with caution. And test, test, test, on all possible browsers your readers might be using, as well as on both PC and Macintosh platforms. Also, make sure that the text contrasts with the page background so that it will be readable whether or not the browser shows the background color you've assigned to the table.

For all table codes, including color attributes, see the Tables section of Bare Bones Guide to HTML