Using Tables for Layout

Because the browser normally renders and places content according to its internal rules, you don't have fine control over where a specific item will appear. In the more recent browsers (version 4 and higher), you can use absolute positioning to force items to plot at specific locations. In earlier browsers (versions 3 and lower) as well as some less popular browsers, you still need to use tables to align and position items on the screen.

A second—and I think for most purposes, more important—reason to use tables for layout, even in modern browsers, is that you can specify table and cell widths in percentages rather than in pixels. It's important because several different common screen resolutions are in use: VGA (640 x 480), Super VGA (800 x 600), and XGA (1280 x 768). For example, adding a width=60% attribute to a table tag tells the browser to render the table at 60 percent of the width of the client area regardless of the screen resolution on the client computer. Sure, your text will wrap differently at different screen resolutions, but you know approximately how the page will look to different users because the table will take up the same percentage of screen real estate whether the user is running a VGA or an XGA display. In contrast, using pixel-based positioning sets the position of items without regard to the width and height of the screen.

Here's an example. Suppose I wanted to add custom numbered images instead of the numbers for the distractors in the multiple-choice question example in Listing 2.6, but I still wanted people to be able to click on the text of each distractor to answer the question. I could use two links rather than a single, all-

text link. The first anchor tag would surround the custom image for each distractor. The second anchor tag would surround the text of the distractor. Both links would navigate to the same page. I would change the first page as follows:

<p>Which of the following is <EM>not</EM> a valid anchor tag type?</p>

<a href="ch2-13b.htm"><IMG SRC="images/1.gif" border="0"></a> <a href="ch2-13b.htm">A link to another document.</a><br> <a href="ch2-13c.htm"><IMG SRC="images/2.gif" border="0"></a> <a href="ch2-13c.htm">A link to a specific position in a document.</a><br> <a href="ch2-13d.htm"><IMG SRC="images/3.gif" border="0"></a> <a href="ch2-13d.htm">A link to a previous document.</a><br> <a href="ch2-13e.htm"><IMG SRC="images/4.gif" border="0"></a> <a href="ch2-13e.htm">A link to the Back button on the browser.</a><br>

Was this article helpful?

0 0

Post a comment