Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

HTML Tip:
Controlling Table Size

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

  
August 2002
Vol. 5, No. 15
 • HTML Tip
 • Promotion Tip
 • Beginner Tip
  

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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.