Advanced Page Layout for Tables and Frames

July 29, 1996

A column by Craig Kosak
with Kate S. Knight

Welcome to the first edition of Just the Facts. I'll touch only lightly on HTML syntax; consult your reference guide for that information.

I'll tackle your questions thematically. In this first column, we'll look at advanced page layout using tables and frames.

(Editor's note: For precise Web page layout, Microsoft Internet Explorer 4.0 supports Cascading Style Sheet positioning. For more information, see the Internet Client SDK documentation .)

Introduction

The main point I'd like to make in this column is that Web design is moving out of the dark ages. In fact, I see very few limitations in the creation of sophisticated page layouts. Virtually any type of layout is possible using tables, and frames allow you to add non-scrolling regions and save download time for elements you want to display on all pages. Microsoft® Internet Explorer and Netscape Navigator offer similar functionality in these areas, but introduce differences you'll have to work around. I'll talk about how to make tables and frames work in both browsers as I answer the questions listed below.

Advanced layout using tables:

Using tables instead of image maps
Using tables for page layout
Keeping table cells fixed in place
Preventing resizing of empty cells
Combining fixed and floating cells
Using nested tables
Table design tips for multiple browsers

Advanced layout using frames:

Design considerations
Navigation and printing limitations
Creating borderless frames
Changing two frames with one click
Frame design tips for multiple browsers
Site management

Advanced Layout Using Tables

I'm using image maps, but they load very slowly. Is there a better solution?

Use tables instead, and fill each table cell with portions of your image. A table is a better layout tool than an image map, because when you use tables:

Users see a progressive rendering of individual images.
Users see URL targets as they mouse over images.
Even with images turned off, users see a nice ALT text layout in Internet Explorer 2.0 and 3.0, and the table is usable before all, or any, of the images load.
In Internet Explorer 3.0, users can see tooltips when mousing over an image.

I'd like to try tables as a page layout tool. How do I begin?

Using tables as a page layout tool requires a different approach than using tables for text. The key is to set the cell padding, cell spacing, and border attributes for the <TABLE> tag to 0, because you'll want to control spacing and borders around each element on your page on a cell-by-cell basis, rather than globally.

When I change the size of the browser window, my images pull apart. How can I make sure that table cells remain fixed in place?

To keep your table cells fixed in place, specify the table width inside the <TABLE> tag.

I've specified the height and width of cells inside my table, but when the cell is empty, it resizes no matter what I do. Help!

An empty cell May still resize, regardless of the table height and width settings. The solution is to make a spaceholder: Create a one-pixel image and stretch it horizontally and vertically as needed, using the height and width attributes in the <IMG> tag. (You must specify at least one pixel in either direction.) This is an alternative to using cell padding, cell spacing, or overly large background-color images, and can be done very selectively. By the way, this is also an efficient way to create a solid-colored cell.

Why would I want to combine fixed and floating cells in one table? How would I do it?

When you combine fixed and floating cells in a table, you allow portions of your page to resize. Why do that? Web users often expect page elements to expand when they resize the window, so you should create your design with resizable areas in mind.

To combine fixed and floating cells, insert fixed tables inside table cells that you allow to float. (These are called nested tables.) Use the ALIGN and VALIGN attributes in the <TD> tag to control the position of the fixed table that lives within the resizable cell.

I get confused when my tables get too complex--all of those ROWSPANs and COLSPANs never seem to work out. Any suggestions?

Use nested tables, but keep it logical by starting with a simple table layout, then placing other tables within the table cells. I think of the highest level table as my design grid, and then I add complexity and depth by adding subtables within the cells of the grid. I'll sometimes nest tables three or four levels deep to build my design.

I'm running into strange behavior when I code for Internet Explorer, and then check my design in Netscape Navigator. What specifically should I look out for?

Working out browser differences can be the most time-consuming part of your job. Here are a few tips that will help:

Can't get Navigator to recognize your changes? Clear the memory and disk cache, then refresh your screen. In some cases, you May have to restart Navigator.
In Navigator, line returns between <TD> and </TD> May cause extra vertical space.
Each browser displays drop-down list boxes and buttons in different sizes. Internet Explorer's versions are smaller, so if you use drop-down lists and buttons in a table, allow surrounding cells to float vertically and horizontally for use in Netscape Navigator.
Keep in mind that Navigator's ALT text layout May be unreadable and that Navigator offers no tooltips.

Advanced Layout Using Frames

What are some of the primary design considerations for frames?

When I begin implementing a frame-based design, the answers to the following questions help me determine the specifications of the frameset:

Do I want borders?
Will I need fixed-size or resizable areas? (Resizable frames will require borders.)
Which areas need to scroll?

Before you implement frames, you should also consider the following:

Frame layout is similar to table layout, but always allow at least one frame to float to accommodate various screen sizes.
Frame-enabled sites can require substantially more files, so consider file management and naming conventions before you begin your implementation.
Consider whether you need to support frame-incapable browsers. If you do, maintaining the content you include in the <NOFRAMES> section of your code can be time-consuming.
Note that frame names and target names are case-sensitive, so decide on a convention and follow it consistently.

When designing with frames, which navigation and printing limitations do I need to know about?

Two considerations come to mind:

Users can print only one frame at a time. Therefore, if you're using frames to display sidebars, examples, or other integral parts of your content (instead of elements that users won't need to print, such as navigation bar or banners), consider providing an alternate way to print the content. For example, you might include downloadable Word or Postscript files.
The Back button May not work as expected. I'd suggest working with a prototype site first to see what happens. It May work better than you think.

What do I need to add to my code so that my frames display with no borders?

You need to set the FRAMEBORDER and FRAMESPACING attributes to 0 in the <FRAMESET> tag. However, browser technology is changing rapidly, providing more flexibility in your coding.

I'm trying to set up a page where a tab in one frame appears to change color when the user selects an article from another frame. How do I change two frames with one mouse click?

If you want the appearance of both frame #1 and frame #2 to change with a mouse click in frame #1, make the link from frame #1 go to a new frameset document, and use the TARGET="_TOP" attribute in the <A HREF> tag to repaint the entire page.

The new frameset document should have the same code as the original frameset document, except that you'll need to source in slightly different HTML documents--in your case, the HTML document in frame #1 will have a different tab color, and the contents of frame #2 will be different. Because everything else in the frameset is identical to your previous frameset, only the appropriate portions of your pages will appear to have changed.

What are the differences in frame coding between Internet Explorer 3.0 and Netscape Navigator?

There are several differences:

Navigator cuts off the bottom and right side of frames. You'll need to specify frame dimensions that are about 10 pixels larger in height and width than you really want. This means that your frames will be larger in Internet Explorer, so plan your design accordingly.
Navigator always places one pixel of white space inside the frame border. This means that you won't be able to align images perfectly with the edges of the frame. Work around this using background colors or images defined in the <BODY> tag of the HTML files you load into the frames.
The two browsers require different code to control frame margins: In Internet Explorer, use TOPMARGIN=n and LEFTMARGIN=n in the <BODY> tag of your HTML documents. In Navigator, use the MARGINHEIGHT=n and MARGINWIDTH=n attributes in the <FRAME> tag. This information will come in especially handy when you're aligning other images on top of background images.

I'm working on a site where I have multiple frames and tables. Tracking the changes is a nightmare. Do you have any suggestions on managing the changes?

A site that has multiple frames and tables will contain many files. The key to managing the site lies in creating a file and directory structure that makes the most logical sense for your site, and establishing conventions for file naming and placement.

Before you begin production, create your organizational structure and decide on file-naming conventions for your frameset and HTML documents. If you neglect this step (easy to do, given the tight schedules all designers face), you'll find that the inevitable changes to your site will cause a tremendous amount of nonproductive work when you can least afford it.

Craig Kosak is the art director of the Microsoft MSDN Online Web Workshop Web site.
Kate S. Knight is an instructional designer, writer, and educator in the computer industry.

Photo Credit: Kevin Fleming/Corbis; Michael Boys/Corbis; Neil Beer/PhotoDisc