How to place objects on the page with tables.Tables can do an amazing number of tasks. With borders, they can become a design element and help organize materials on a page. Without borders they can be used to place text, graphics, and backgrounds into particular locations.
The simplest tables consist of one cell, and can be used to frame an object or text. Probably the most useful tables consist of two cells side by side. With this kind of table you can position an image, for example, side by side with text. Tables can consist of many cells, however, and you can even put tables inside of tables.
TABLE programs consist of the initial TABLE tag, which includes attributes such as width (in either percentages or pixels), border, and bgcolor. The TABLE tag is followed by the <TR>, or table row tag, which can also indicate background colors and borders, etc., and the <TD>, or table column tag. More than one TR or TD tag can be given in a table, but each of these tags must be closed in the order that they are given.
8th Assignment:
Make a simple table for your page.The most important thing to remember about tables is not to get lost in them. This is where clear progamming habits become very important. If you look closely at Adrian's table assignment, you will see that he has a table with one row and two columns. Look at the source code. Adrian's assignment is available in two formats: one with tags pretty much running together, and the other with indents in the Notepad text to show where cells begin and end. Which would you rather make additions to?
Adrian's table version 1.
Adrian's table version 2.Adrian's table has visible borders and a different background color in the table than what is on the page. Adrian achieved this with this command: <table width="100%" bgcolor="#99ff33" border="1">. He has chosen to make the table 100% of the entire width available on the page. If you look again at his <TD> tag, you will see that it has a width of 25% of this table. The second <TD> tag has no width given, but it would automatically get what is left over, or 75%.
Giving table widths in percents is nice because the browswer will automatically adjust the table to fit the screen of the visitor, no matter what their resolution is. If the table widths are given in pixels, then the number of pixels on the screen needs to be taken into account.
If you look at the code for this page, you will see that there are two tables, one within the other. The first table was set up to move the text and graphics over to the right so they would not overlap the border background. It it only two cells, and it closes at the very bottom of the page. Notice this table has no border. If it did, it would look like this. (Check this out.)
The second table contains the lesson. It has a border, and a different background color than the page. Notice the width of this table is 85%, so that it will fit comfortably inside the cell of the first table.
Both tables are opened and closed in this order: <TABLE><TR><TD>The stuff you want in the table.</TD></TR></TABLE>.
If you want two cells side by side in a table it would look like this: <TABLE><TR><TD>The stuff you want in the table.</TD>
< TD>More stuff that you want in the table.</TD></TR></TABLE>. Copyright ©2000, Marilyn Huffman. All rights reserved.