Exit tutorial
 Web Design - Good and Bad Practice |
| Part Ten |
| Tables Learn how to use tables and you will be able to tightly control the look of your web pages. Tables let you break your page into precise segments and control the placement of graphics and text. You can use tables to create columns and grids to contain the images and text. You can even use tables within tables to create sub-sections that can be treated as a unit. Table cells can be filled with colour to add contrast to parts of the page. Whenever you see a page that looks like a magazine or a newspaper, you can be sure that the structure is based on tables. Tables can be used as templates or style sheets to impose a uniform look on a web site. And tables can give you some of the functionality of frames, but without the headaches. There are several ways to learn how to use tables. The easiest way is by studying table-based sites on the web. You can study the HTML source of a table-based web site that pleases you, or load the page into an editor and experiment with moving the different elements around and studying the effect. There are also a number of tutorials on the use of tables available on the web. Any book that covers page layout theory and technique, such as used in newspaper or magazine, will give you some guidance in understanding the aesthetic issues involved. Go to the "Graphic Arts" section of your local library, book store, or art supply store and look for a book on the subject of page layout. Try to find one that utilizes the "grid" method. Some problems encountered in using tables: If your page is based on tables in may load more slowly than a page without tables. This is because the browser has to do a lot of calculations to figure out how to place all the items that are in the table. In addition, the browser may not display the table until all the text and graphic items have been downloaded. You can speed this up in several ways. If the table is very long (more than several screens high) try breaking it into smaller tables, one above the other. Using tables this way will also make it easier to rearrange the elements on the page. Also, make sure that the height and width is specified for all the images in the table. Doing this will allow the browser to size the table before it gets all the images. Even though tables are part of the earliest HTML standards, there are still differences in the way that they are displayed by different browsers. Getting your tables to display correctly in all the popular browsers can be a challenge. For instance, some browsers won't display a coloured cell unless there is text or an image in it. Others may vary in how they display nested tables or tables stacked one above the other. So, as you develop your table-based pages, test them continuously with a variety of browsers. It will save from unpleasant surprises further down the line. Another challenge is determining which parts of the table to make fixed-width (defined in pixels) and which parts to make variable (defined as a percentage of the current browser width). With a variable width table, the horizontal dimensions of the table readjust as you change the browser width. The trade-off is that fixed width guarantees the final appearance more tightly, but the variable width can take better advantage if the browser has a larger width. In some cases, the optimum results are with a combination of fixed and variable width for the different parts of the table. Again, a certain amount of experimentation is required to find the optimum balance. Make sure that you test your table-based page at different browser widths. Tables are one area where most WYSIWYG web page editors have problems. The editor's display can vary greatly from what you see in the browser, especially with complex or nested tables. If you download a trial version of one of these editors, make sure you check the accuracy of how it displays tables. As mentioned in the section on printing, tables will affect how your web pages print out. Tables may also affect how your web page scrolls within the browser. Depending on the particular browser, the page may jump rather than scrolling smoothly. One more element to test during design. Frames Don't use frames just to show that you know how to use frames. Your web page is small to begin with, and carving it up with frames can reduce the usable area to a tiny fraction of the screen. Some visitors will have browsers that can't see frames, so you'll have to maintain two versions of your site. Don't build your site around frames. It makes it difficult to navigate and limits you to having a very simple site. The cursor keys don't work unless you click in the frame you want to scroll, and the browser's 'Back' button may produce unexpected results. And there's also a good chance that a visitor's attempt to print out your page will end in failure. And an interesting surprise awaits the visitor who tries to bookmark one of the pages within your site. (They'll just get the URL of your main page.) And you may get unexpected results when a search engine indexes your site. Visitors who come to one of your pages from a search engine won't be entering through the site's front door and won't see the frame that would normally be holding the page. And if your "framed" site has links to other sites, they'll show up within your frame, masking the identity of the other site and confusing visitors, who'll wonder where they really are. And you won't be able to bookmark the linked-to site. In addition, there may be copyright issues involved if another site shows up within the frame of your site. In any case, it's certainly unfair to the other site. And if there's a problem with one of your framed pages, it'll be difficult to report since only the URL of the main page is displayed. Frames also cause problems when the browser is called from another application. Say that you're in your email reader and someone has sent you a message which includes a link to a web site. You double-click on the link and now the browser becomes the front window and begins to load the page. If the last thing you were looking at in the browser was a frame-based site, guess what happens? You can get some of the functionality of frames, without the complexity, by using tables to lay out your pages. One possible use for frames is if you have a report where you want to lock the row or column titles so they don't scroll off the screen. |