|
Creating
Web Tables You've probably noticed by now that the web pages in these exercises have been very simple and linear; that is, the elements on the page are stacked vertically. To control placement of elements on the page, you must use tables. Even if you use Web-authoring software to design your Web pages, it's still helpful to know and understand HTML coding for tables so you can make adjustments to a page. Sometimes it's easier to add or edit tables via coding than it is on the WYSIWYG design view. Let's take the page you created on the Preparing Web Graphics exercise and add some tables and text so that the page looks like this one. To do that, open the text file you created in HTML coding. It should look something like this: <html> Place your cursor after the words: "located on the west bank of Lake Alice." Right before the closing </p> code, add this text: The thumbnail photo of the Baughman Center, at left, is a link to a view of the center from Lake Alice's observation deck near Cory Village. Now look at your page in a browser. You'll notice that the text stretches all the way across the browser and extends in length when the browser window is stretched. We want to control both the size of the Web page (designing for 800 by 600) and the placement of elements. (Be sure to read About Using Tables in Chapter 13 of Williams' Non-Designer's Web Book.) Your Barebones Guide to HTML will give more details about tables, but we are going to use just three basic table elements:
First let's enclose the whole web page in a table to control the width of the page. After the body tag with all its attributes (link colors, background color, etc.), add the table code and specify its width, and set its alignment, like this: <table width=750 align="center"> (750 accommodates the space taken up by the browser window). We won't control the height, but we could. The default border is 0 pixels, so the table is invisible. After the table code, type the row and cell command. It all should look like this: <table width=750 align="center"><tr><td> Put the closing-off code at the end of the document, right before the closing </body> code. It must be in exact reverse order. It looks like this: </td></tr></table> Your entire page of coding should look like this (new elements here are in bold, but yours won't be): <html> Now view your html page in a browser. It should snap to a width of no more than 750 pixels, no matter how large the browser is stretched, and be centered in the browser. (You can also align left and right.) But the layout is still linear. To control placement of elements, we must nest a table inside the large table we created. TOP ........ Controlling Placement We want a nested table with one row and two columns, or cells, so we can put the text beside the picture and control its placement. We'll start with the table and row codes, immediately after the Baughman Center heading, then place the cell codes to "capture" the graphic and the text and put them where we want them. We'll use the vertical alignment code (valign) to place the text at the top of the cell. It could also be vertically aligned at the middle or bottom of the cell. If you don't give a vertical code, it will default to the middle of the cell. Your coding will look like this (with new elements here in bold again): <html>
Designing a Web page requires careful planning of the tables needed to control placement of elements. Now try this same exercise in Dreamweaver. |
