Contents
Tables
The basic idea for making a table is that you start the table with <TABLE>,
end it with </TABLE>, surround each row with <TR> </TR>,
and surround each cell with <TD> </TD>. Of course, there are
many options to put in each of those tags, but here's an example of the
most basic kind:
<TABLE>
<TR><TD>Upper left</TD>
<TD>Upper right</TD></TR>
<TR><TD>Lower left</TD>
<TD>Lower right</TD></TR>
</TABLE>
Which looks like:
| Upper left |
Upper right |
| Lower left |
Lower right |
TABLE Options
As we can see from our example, the default table setup does not have borders
and does not fill the width of the browser, and has a little bit of space around
each table cell. We can change these things by adding options to the TABLE tag:
- <TABLE BORDER=2>
This tag would cause there to be a 2 pixel wide border around each cell.
(default is 0)
- <TABLE CELLSPACING=3>
This would make sure there are 3 pixels of space between each cell. (default
is 2). This is much more useful than cellpadding when your border is 0.
- <TABLE CELLPADDING=3>
This would make sure there are 3 pixels of space between the text in the
cell and the border around the cell. (default is 1). This is much more
useful than cellspacing when you have a border.
- <TABLE WIDTH=75%> This would make the whole table fill
75% of the width of the window. Without the % sign, the width would
be 75 pixels.
New Example:
<TABLE BORDER=3 CELLPADDING=3 WIDTH=100%>
<TR><TD>Upper left</TD>
<TD>Upper right</TD></TR>
<TR><TD>Middle left</TD>
<TD>Middle right</TD></TR>
<TR><TD>Lower left</TD>
<TD>Lower right</TD></TR>
</TABLE>
| Upper left |
Upper right |
| Middle left |
Middle right |
| Lower left |
Lower right |
TD Options
There are still more things we may want control over in our table. Here are some
of them:
- <TD COLSPAN=2>
This would cause one cell to be two columns wide (with no line down the middle).
- <TD ROWSPAN=2>
This would make a cell be two rows high without a dividing border line.
- <TD VALIGN="top">
This would make the text in the cell be aligned with the top of the cell.
Other possible values are "middle", "bottom", and "baseline". Default is
middle. You can also use this option in the TR tag to align all the cells
in that row the same way.
- <TD ALIGN="center">
This would make the text in the cell be aligned in the middle (left to right)
of the cell. Other possible values are "left" and "right". Default is left.
You can also use this option in the TR tag to align all the cells in that
row.
- <TD NOWRAP>
The text in this cell will not wrap to the next line, so it may determine
how wide your table is. Be careful with it.
- <TD WIDTH=25%>
This cell (and the entire column) will be 25% of the width of the table.
Without the % sign, the cell (and column) will be 25 pixels wide. Note
that this should be used in the first cell in that column (see example,
below).
New Example:
<TABLE BORDER=3 CELLPADDING=3 WIDTH=100%>
<TR COLSPAN=2><TD>Upper cell</TD></TR>
<TR VALIGN="bottom" WIDTH=25%>
<TD ALIGN="right">Middle left</TD>
<TD ROWSPAN=2>right</TD></TR>
<TR><TD>Lower left</TD></TR>
</TABLE>
| Upper cell |
| Middle left |
right |
| Lower left |
People without tables
Not everyone can see tables. For those unfortunate souls, sometimes the content
appears on one confusing line of text. To prevent this, we can add the <BR> tag
to the end of each cell. This does not change the appearence of the table in
Netscape, and does not make the content appear in a table form for the table-less
viewer, but it does make the content easier for them to read, in a list format.
New example:
<TABLE BORDER=3 CELLPADDING=3 WIDTH=100%>
<TR COLSPAN=2><TD>Upper cell<BR></TD></TR>
<TR VALIGN="bottom" WIDTH=25%>
<TD ALIGN="right">
Middle left<BR></TD>
<TD ROWSPAN=2>right<BR></TD></TR>
<TR><TD>Lower left<BR></TD></TR>
</TABLE>
Upper cell
|
Middle left
|
right
|
Lower left
|
Frames
The following is the HTML code for this example page:
<HTML>
<HEAD><TITLE>Trying out Frames</TITLE></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="advanced.html" NAME="Frames">
<FRAMESET COLS="*,100">
<FRAME SRC="http://www.rochester.edu/IT" NAME="UR"
SCROLLING="no" NORESIZE>
<FRAME SRC="frametest2.html" NAME="Frametest">
</FRAMESET>
</FRAMESET>
</HTML>
To make a page with multiple frames, you must make create a file with no
BODY, but with FRAMESET and FRAME tags, like above. Then you create a separate
HTML file for each window you want on the page.
FRAMESET
The FRAMESET tag consists of a ROWS option, a COLS option, or both. If you use
both in one tag, then you will have a grid setup (unlike our example above, which
has one window which spans the width of the two below it.)
The format for specifying where you want your windows is ROWS="a,b,...,z" where
a, b, etc, can be a percent value (percent of the width of the total Netscape
window), a number value (number of pixels wide or high), a * (however much
space is left over) or a number followed by a * (to make ratios: for example, "2*,*" means
the first row/column is twice the height/width of the second.) The number of
values separated by commas is the number of rows or columns you want.
Deciding how to arrange your FRAMESET tags can be tricky. If you want only
two windows, one above the other, you need just one FRAMESET tag with a ROWS
option. Likewise, two windows side by side need one FRAMESET tag with a COLS
option. Four windows divided by a cross also take just one FRAMESET tag, with
COLS and ROWS each having two values. But if you want something more complicated,
like the above example, you can use the following method after drawing a diagram
of what you want:
First decide which border line you want to cross the entire screen (top to
bottom or left to right). If it (or they) are horizontal, the outer FRAMESET
tag should have the ROWS option (with however many commas as there were lines
crossing the whole screen). If the longest line(s) are vertical, use the COLS
option.
If one of the rectangles formed by those lines is subdivided into more rectangles,
you need another FRAMESET tag. Again, find the line(s) that completely crosses
the window you want to divide. When you're done dividing up the window, you
need to add FRAME tags to decide what goes in them.
FRAME
The FRAME tag should contain information about while file to load in that window,
and a name for the window (so that you can "target" the window later when you
want to load different things there). There are also other options for the FRAME
tag.
SRC="http://some.address.org/" is how you specify what to load in that window.
It can be a file name or full URL.
NAME="somename" is how you name that particular frame. The user will never
see that name.
NORESIZE, if present, means the user may not make the frame bigger or smaller
by dragging the edge.
SCROLLING="yes/no/auto" determines whether there is a scrollbar with that
window. The default is auto and means that if the whole page fits in the window,
there is no scrollbar (otherwise, there will be horizontal and/or vertical
scroll bars.)
Targetting frames
If you have a link in one of your windows, when the user clicks on it, the new
page will (by default) be loaded in the same window. If you want it to be loaded
in a different window, you can write the link like this:
<A HREF="http://www.rochester.edu/careercenter"
TARGET="UR">Career Center</A>
If you want all or most of the links in a certain file to be loaded in a different
window, put the following tag at the beginning of the BODY:
<BASE TARGET="UR">
What if you don't want the link to load in a frame at all? What if you want to
get out of the frames? Use TARGET="_top" in the A tag or in the BASE tag. For
example:
<A HREF="http://www.rochester.edu/UCC/"
TARGET="_top">UCC</A>
Meta
<META> is a tag you put in the HEAD section of an HTML document. It contains
information about the author and content of the page so that when your page is
indexed by a search engine, the stuff it remembers about your page is the stuff
you want it to. For example, go to Altavista's Search Page and search for "Robin
McKinley" (include the quotes for best results). The pages that use the META
tag have clear descriptions, but those that don't just have the first few lines
of text as descriptions, and that can be confusing.
Syntax and Options
A META tag either contains a NAME field and a CONTENT field or a HTTP-EQUIV
field and a CONTENT field. Examples:
- <META HTTP-EQUIV="Refresh" CONTENT="3;URL=http://www.some.org/some.html">
This tag would make the specified URL load and replace the current page after
3 seconds. The URL is optional. Without, the current page simply reloads
itself after the specified number of seconds.
- <META HTTP-EQUIV="Window-target" CONTENT="_top">
What if you never want your page to appear in a frame? Other Web authors
can write frames pages that load your page inside their frame. To override
this, you can use the above tag. That way, your page will never appear
in anyone's frames.
- <META NAME="description" CONTENT="Citrus fruit wholesaler.">
You can use this tag to make your own summary of your Web page. When people
use search engines to find your page, they will be given this description.
- <META NAME="keywords" CONTENT="oranges, lemons, limes">
This tag determines when a search engine will return your page. If someone
does a search for any of the keywords specified, your page will be on the
list of matches returned.
- <META NAME="author" CONTENT="Amanda Ridder">
Just in case you want your name there. It is possible that some search engines
may return this information to someone doing a search, but I don't think
that's usually the case.
|
