|
|
Although <table></table> tags were designed to provide a way to present page content in a row-column format, they can also be used to control the width of the screen area used by a web page. If you wanted to create a web page that contained a set of links running down the left side of the screen with the page content to the right, you could do it by formatting the entire body of the document as a table containing a single row with two columns. The following HTML would create a page with a two-column table that occupies the entire screen width. At a width of 150 pixels, the left column is large enough to accommodate short hyperlink descriptions like you might find in a menu. The right-hand column, which occupies the rest of the screen area, holds the meat of the web page content.
<body> <table width="100%"> <tr> <td width=150 valign=top bgcolor="lemonchiffon"> Menu links go in this table cell. </td> <td bgcolor="lightcyan"> Page content goes here. </td> </tr> </table> </body>
The above HTML would be rendered thusly by the browser:
| Menu links go in this table cell. |
Page content goes here. |
If you want to limit the overall width of the web page to a fixed size of 600 pixels, you can place the entire content of the body section in a table consisting of a single cell as shown here.
<body> <table width=600> <tr> <td bgcolor="lightcyan"> Page content goes here. </td> </tr> </table> </body>
The following sample uses a single cell table with a width of 600 pixels. A background color has been used so you can see the table boundary.
Lincoln's Gettysburg AddressFour score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met here on a great battlefield of that war. We have come to dedicate a portion of it as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But in a larger sense we can not dedicate—we can not consecrate—we can not hallow this ground. The brave men, living and dead, who struggled, here, have consecrated it far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but can never forget what they did here. It is for us, the living, rather to be dedicated here to the unfinished work which they have, thus far, so nobly carried on. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they here gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain; that this nation shall have a new birth of freedom; and that this government of the people, by the people, for the people, shall not perish from the earth. |
As more web designers start building their pages on computers equipped with large, high resolution monitors, they run the risk of creating pages that cannot be easily viewed by users with older systems. The most common resolution in use today is 800 x 600, so, allowing for things like scroll bars, no page should have an absolute width of more than 650 pixels. Forcing a page width to a size greater than the system that's rendering it can result in two problems. First, it forces the user to scroll left and right to view the page content. Second, if the user wants to print the page, it will be chopped off on the right side.
Click here to see an example of a bad use of tables for page layout.