HTML Tip:
Controlling Table Size

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Even though a growing number of webmasters use Cascading Style Sheets (CSS) on their pages, most still control page layout with tables. And at some point during the design process, they're sure to struggle with the HEIGHT and WIDTH attributes in TABLE and TD tags. Browsers don't always interpret those attributes like you expect.

Setting The Minimums

In previous newsletter stories, we've advised you to always use he WIDTH attribute in your TABLE and TD tags. Like HEIGHT and WIDTH attributes on images, the WIDTH attribute in tables gives browsers vital information about your page layout and make pages at least appear to render more quickly.

But sometimes designers get confused by what height and width really tell a Web browser. If you set a table's HEIGHT to 500 pixels and the WIDTH to 740 pixels, then the table will always be that size, right?

Wrong.

HEIGHT and WIDTH attributes set the minimum size of the table, not the maximum. If the page elements are larger than the table size you've specified, then the table will always expand to accommodate them. Tables have to be able to stretch to fit your page content. Otherwise browsers wouldn't be able to display your page!

My Page Is HOW Wide?

That means that you have to be very careful when you're setting the size of your page elements - especially the images. It's pretty easy to get an unexpected scrollbar when your table has to stretch to fit a large image.

This problem most often happens on a site's home page when the site logo or banner is wider than the table. The person coding the page may set the table width at 760 pixels wide, but then the graphic artist sends a logo that measures 780 pixels wide, and then there's another page element for the same line that measures 40 pixels wide.

The result: the table is suddenly 820 pixels wide instead of the expected 780 pixels! Suddenly, the page you designed to display perfectly at 800x600 and higher screen resolutions has a horizontal scrollbar.

That's not the only problem though. Suppose the page had a really tight layout that depended on each page element displaying in a "pixel perfect" manner? When the table stretches, the layout may not display as desired - especially if you have a lot of text wrapped around images.

Keep Measurements Consistent

Some browsers may get confused if you mix percentage widths and fixed widths in your TABLE and TD tags - like a TABLE WIDTH="740" and a TD tag set to WIDTH="65%". Since you're mixing width types, browsers may have trouble rendering the page.

It's a lot safer to select either fixed or percentage measurements for your tables and keep the system consistent on the page. Always explicitly define the WIDTH attributes of all your TD tags to avoid the Netscape bug that produces unpredictable column widths.

The best way to define widths in tables (fixed or percentage) is a matter of some debate among Web designers. In an upcoming Design Tip, we'll discuss the difference between a fixed table layout (where the width is always the same) and a liquid layout (where the table stretches or compresses to fit the browser window). Either option seriously impacts how your page displays in different browsers and screen resolutions.

Other design choices can also affect how your page displays on a number of operating systems and in different browsers. Use NetMechanic's Browser Photo tool to quickly find and fix display problems before they drive away visitors. Browser Photo shows you actual screen shots of your Web page in 16 different browsers, operating systems, and screen resolution combinations.

Learn more about browser display problems - and how to avoid them - in our online Browser Compatibility Tutorial.