University IT » Web Services » Help » Advanced HTML

Advanced HTML

Tables
Frames
Meta

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>

University of Rochester

Need Help