|
Advanced HTML Features |
Tables, Frames and
Forms
(Frames and Forms are not yet ready, check back soon!) |
|
|
These items are much harder. I recommend holding off on these, until you
understand the basic html features first. I am going to start with tables, because that seems
to be what folks need to learn fairly quickly, especially when you want to use a border
background such as the one I am using here. If you do not use a table for this type of
background, you run the risk of having your text overlap the image.
When I create a page, I almost always use a table because it gives
more control on where to place things. Here are the basics of a table: |
|
< TABLE > | tells the browser to make a table |
|
< TR > | starts a new ROW of the table
(going down) |
|
< TD > | starts a new COLUMN of the table
(going across) |
|
< /TD > | ends the COLUMN of the table |
|
< /TR > | ends the ROW of the table |
|
< /TABLE > | tells the browser to end the table |
| |
ALWAYS make sure if you use a table, that you have the ending tags on your page,
otherwise NOTHING will show up. If you have an error, check that first. You will
note with this table, I have 6 rows and two columns. So first I must tell the browser
that I want a table, by using < TABLE >, then I say, okay, I want a row, and two columns.
Like this:
< TR >(row starts)< TD >(column one starts)< /TD>(column one ends)
< TD >(column two starts< /TD >(column two ends)< /TR >(row ends.)
I have to do that for each of the six rows I want. So the final 6 row, 2 column table code
looks like this:
< TABLE >< TR >< TD >info here < /TD >< TD >info here < /TD >< /TR >
< TR >< TD >info here < /TD >< TD >info here < /TD >< /TR >
< TR >< TD >info here < /TD >< TD >info here < /TD >< /TR >
< TR >< TD >info here < /TD >< TD >info here < /TD >< /TR >
< TR >< TD >info here < /TD >< TD >info here < /TD >< /TR >
< TR >< TD >info here < /TD >< TD >info here < /TD >< /TR >< /TABLE >
Okay, beyond the basics, there are some other table attributes that are good to know.
It is best to tell the browser how wide your table is, this allows the browser to format
your page prior to loading all images and text (this is why it is best to have height and
width tags for an image as well.) The table above has a width of 470. Something
else you can do is tell the browser if you want a border around your table.
You will note the above table has a border attribute of 1, but the table formatting
this page has no border. (I build all my page formatting
tables with BORDER=1 in the table tag, and then change it to zero after the page
is done. By doing this, I can easily see where an error is.) So now, my table tag
might look like this: |
|
< TABLE BORDER=1 WIDTH=600 > |
|
I used 600 as a width here, that is approximately how wide a web page is.
Athough some folks use a larger size, I make my pages to fit
a 400x600 browser window. Now on the column tag (< TD >,) you can add the
attribute of alignment. ALIGN=center or right or left, depending on what you
want. If you do not specify an alignment, it will default to the left. The finished
tag will look something like this: |
|
< TABLE BORDER=1 WIDTH=600 >< TR >< TD ALIGN=center > |
|