Lesson 9 - More Tables
Before you leave tables, you should see a couple more tricks using tables that can help you design your website.
Back in Lesson 6, a page using a background image was introduced. All the text was centered in order to get it away from the left-edge image.
<head>
<title>Acme Seed Company</title>
</head>
<body background="bjack021.jpg">
<div align="center"><h1>Get Smarter!</h1>
<h4>Cure acne and shyness too!</h4>
<h6>Works in 7 years!</h6></div>
</body> |
 |
Now, you can rewrite this page using tables and still be able to line up your words on the left side.
|
<head>
<title>Acme Seed Company</title>
</head>
<body background="bjack021.jpg">
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td width="25%"> </td>
<td width="75%" align="left">
<h1>Get Smarter!</h1>
<h4>Cure acne and shyness too!</h4>
<h6>Works in 7 years!</h6>
</td>
</tr>
</table>
</body> |
 |
The dark gray line in the above example is the first column in your table. It will take up 25% of the screen width and will have a blank space in it. That's what is. This is just an empty place holder. On this page, all the content will be in the 2nd, 75% cell, and you can treat it just like a website on its own, as long as you remember to close the cell </td>, the row </tr>, and the table </table>.
Note that nothing will work in your table if you forget to close the table. If you forget the row, the browser will try to put more cells in the table. If you forget to close the cell, some browser versions will forgive you and understand what you mean. It is better to close the table to be on the safe side.
Remember the page with navigation column that you created in the Lesson 8? Here's a similar one using the Acme page.
Here's the code:
<table width="100%" height="100%" cellpadding="5" cellspacing="5" bgcolor="#CC0000">
<tr>
<td width="25%" bgcolor="#FFFF00" valign="top" align="center">
<p><a href="customers.html" target="_blank">See Comments
<br> from our<br>Customers</a></p>
<p><a href="http://www.comicnews.com" target="_blank">See Our
<br>Philosophy><br>On Life</a></p>
<p>See Medical<br>Research on<br>
Our Seeds</p>
</td>
<td width="75%" bgcolor="#FF9966" valign="top">
<h1>Get Smarter!</h1>
<h4>Cure acne and shyness too!</h4>
<h6>Works in 7 years!</h6>
</td>
</tr>
</table>
|
- First, open the table and tell the browser to take 100% of the height and 100% of the width. The background is a dark red.
- The first column is 25%, and whatever goes in there will start at the top (valign="top"). The horizontal axis will be the center of the column.
- Then, list three links. The <br> tag (a line break) was used in order to keep the lines short, since the column is so skinny.
- Notice that "Medical Research" is not linked. It could be that there has been no medical research on these seeds.
- Then, open the second column. This is 75% of the screen, in a different color.
- There are 3 headings in here, and some day, you'll add pictures of happy customers, and maybe a close-up of the seeds, and maybe a list of prices - by the seed and in bulk.
- Finally, close the table.
Here's a picture of the page:
You can also use tables to create a graphic design. Look at this code for the top of the page:
- <table width="100%" border="0" cellpadding="5" cellspacing="0">
- <tr>
- <td bgcolor="#6600CC" width="12%"> </td>
- <td bgcolor="#FF0000" width="13%"> </td>
- <td bgcolor="#FFFF00" width="75%"> </td>
- </tr>
- <tr>
- <td bgcolor="#6666FF" width="12%"> </td>
- <td bgcolor="#FF9966" width="13%"> </td>
- <td bgcolor="#FFFF00" width="75%"><h1>Acme Seed Company</h1></td>
- </tr>
- <tr>
- <td bgcolor="#0066FF" width="12%"> </td>
- <td bgcolor="#CC0000" width="13%"> </td>
- <td bgcolor="#FFFF00" width="75%"> </td>
- </tr>
- </table>
|
- Open the table and set the width at 100% of the screen.
- Open the first row, open the first cell, set it at 12%, and color it dark blue. It will be an empty cell with just the color.
- Open the second cell, set it at 13%, and color it bright red. It's also empty.
- Open the 3rd cell, set it at 75% of the screen, and color it yellow. Close the cell and the row.
- Open the 2nd row, first cell, set it at 12% and color it royal blue. It will also be an empty cell; except for the color.
- Open the 2nd cell, color it lighter red, set it at 13%. It will be empty too.
- Open the 3rd cell in the 2nd row, set it at 75%, color it yellow, and print in a big bold font, "Acme Seed Company". Close the cell.
- Close the row and open the 3rd row.
- Open the 1st cell in the 3rd row, set the width at 12%, and color it royal blue.
- Open the 2nd cell, set it at 13%, and color it dark red.
- Open the last cell, set it at 75% and color it yellow.
- Close the row and the table.
If you paste the code mentioned above at the top of your page and do a little fine tuning, this is what it would look like:
Hopefully, it will give you some ideas of the kind of graphic designs that are possible with tables.
This is the end of Lesson 9. Please go to the next lesson.
|
