How to Add a DOCTYPE in Dreamweaver
Code to Use in JavaScript Variable Manipulation Functions
Troubleshooting JavaScript

How to Organize Your Web Page with Tables and Frames

Using tables and frames on your Web page helps you present information to your site visitors in an organized manner. Tables are a layout tool for data tables on Web pages, but the table capability for Web pages has long been used to control the layout of the entire page.

Designers make the cells of a table very large, and put large graphics or whole blocks of text in them. You can even resize tables automatically to accommodate various sizes of Web-browser windows — at least up to a point.

Whether and how to use tables was, for a long time, one of the most controversial topics in Web-page design.

Frames are more powerful layout devices than tables, but they have fallen into disfavor. They allow separate parts of the Web-browser window to be updated and scrolled separately. However, they produce odd effects; users seem to prefer one unified window to separate “panes” within a window.

When designing your own Web page, there are so many different elements that you have to adjust in table-based page design that you need to invest a lot of time and energy to learn how to use tables effectively for layout purposes. And then a whole other set of issues arises about making sure your table-based page design works well on most or all current computer systems and Web-browser setups that are in use.

To create your own tables, you can get started by using the Insert→Table command in CoffeeCup. However, you really need a more advanced tool to work effectively with tables in your Web pages — something like Microsoft FrontPage or Dreamweaver, both of which give you more direct control over specific options. Of course, your other option is to start doing a lot of experimenting in HTML until you learn how to get things just how you want them.

For details on how to use tables for layout, start with this Web design article.

Frames divide a Web page into separate areas which you can then update individually. For example, you can click a link in a frame in the bottom half of a Web page and update it with new content while the other frame stays unchanged. This seems like a powerful capability. However, frames are less popular than tables because frames are hard to create and manage. But advanced With frames, the trouble comes with the “useful” part; users have a hard time using framed Web pages.

For example, when browsing a framed page, users sometimes have difficulty finding where the cursor is. If the user moves the scroll bar, which frame scrolls? Also, going forward and backward in a frame is different from going forward and backward in the overall Web page, so users may get lost easily. And printing a framed page properly requires extra steps.

Finally, frames create a functional problem or two. When users resize a browser window, framed pages don’t always resize correctly. And designing a framed page to work well for various monitor sizes is even harder than correctly designing pages with tables embedded in them.

blog comments powered by Disqus
JavaScript Object Terms
How to Use HTML Lists on Your Web Page
JavaScript Basic Cross-Browser Document Object Model
How to Create Lists in HTML5
How to Build Tables in HTML5