HTML Guide

CREATING HTML DOCUMENTS

 HTML documents are in plain text format and can be created using any text editor

Sample HTML Document

<HTML>
<HEAD>
<TITLE>Demo Page</TITLE>
<!-- Created by: Prof. Dunsmore, Sep 7, 1997 -->
</HEAD>
<BODY>
<H1>Demo Page</H1>
HTML documents are in plain text format and can
be created using any text editor. <P>
</BODY>
</HTML>

HTML uses markup tags to tell Web browser how to display text

HTML tags are usually paired --
<H1> and </H1>

<H1> tells Web browser to start formatting level-one heading

</H1> tells browser that heading is complete

Sample exception to pairing rule is <P> (paragraph) tag

NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>.

<!-- text --> is comment in HTML source

Not all tags are supported by all Web browsers

If browser does not support tag, it just ignores it

TITLE and HEADINGS

 Every HTML document should have title used primarily for document identification

HTML has six levels of headings, numbered 1 through 6, with 1 being most prominent

<Hy>Text of heading </Hy >

where y is number between 1 and 6

In many documents, first heading is identical to title

ALIGN attribute can be used to explicitly specify horizontal alignment

ALIGN=LEFT -- Heading is flush left (default)

ALIGN=CENTER -- Heading is centered

ALIGN=RIGHT -- Heading is flush right

PARAGRAPHS

 Web browser ignores multiple spaces, line breaks, and starts new paragraph only when it reaches <P> tag

Browser ignores any indentations or blank lines in source text

However, to preserve readability in HTML files, headings should be on separate lines, and paragraphs should be separated by blank lines (in addition to <P> tags)

Originally <P> tag was un-matched and used at end of paragraph

Newer version can be used with matching <P> ... </P> tags

With newer version ALIGN attribute can be used

<P> ... </P>

same as

<P ALIGN=LEFT> ... </P>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

<P ALIGN=CENTER> ... </P>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

<P ALIGN=RIGHT> ... </P>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North.

LINKING TO OTHER DOCUMENTS

 Chief power of HTML comes from its ability to link regions of text (and also images) to another document

Browser highlights these regions (usually with color blue and underlines) to indicate that they are hypertext links

HTML's single hypertext-related tag is <A>, which stands for anchor

To include anchor in your document:

Start anchor with <A

Specify document that's being pointed to by entering parameter HREF="filename" followed by closing right angle bracket >

Enter text that will serve as hypertext link in current document

Enter ending anchor tag: </A>

<A HREF="MaineStats.html">Maine</A>

MaineStats.html is in same directory as first document

Link to documents in other directories by specifying relative path from current document to linked document

<A HREF="AtlanticStates/NJStats.html">New Jersey</A>

These are called relative links

RELATIVE LINKS VERSUS ABSOLUTE PATHNAMES

 In general, you should use relative links, because...

They are shorter

It's easier to move group of documents to another location, because relative path names will still be valid

Use absolute pathnames when linking to documents that are not directly related

Uniform Resource Locators (URLs) specify location of files on other servers

scheme://host.domain[:port]/path/filename

where scheme is one of

http
file on World Wide Web server
gopher
file on Gopher server
news
an Usenet newsgroup

Port number can generally be omitted

<A HREF = "http://www.cbs.com/dave/schedule.html"> 
Late Night Schedule for December</A>

www is usually alias -- www.cbs.com might be alias for bigeye.cbs.com

For security, www alias usually maps to specific directory

www.cbs.com goes to www.cbs.com/public/.www

mentor.cc.purdue.edu/~jonesdr goes to /home/mentor/a/jonesdr/WWW

Link to directory is to default file in that directory -- Welcome.html, welcome.html, index.html, homepage.html

http://www.cbs.com --> http://www.cbs.com/index.html which is really www.cbs.com/public/.www/index.html

http://icdweb.cc.purdue.edu/~jonesdr --> http://icdweb.cc.purdue.edu/~jonesdr/welcome.html which is really ...jonesdr/www/welcome.html

To make a link that sends e-mail...

Please send any comments or suggestions to 
<A HREF = "mailto:dunsmore@cs.purdue.edu">
the instructor</A>.
which looks like this...

Please send any comments or suggestions to the instructor.

LINKS TO SPECIFIC SECTIONS IN DOCUMENTS

 Anchors can also be used to move to particular section in document

Set link from document A to specific section in document B

Set up named anchor in document B

Here's <A NAME = "history">some text</A>

Create link in document A, include not only filename, but also named anchor, separated by hash mark (#)

This is my <A HREF = "documentB.html#history">link</A>
to document B

Links to Specific Sections Within Current Document

This is <A HREF = "#history">history link</A>
from within Document B

UNNUMBERED LISTS

 Start with opening list <UL> tag

Enter <LI> tag followed by individual item. (No closing </LI> tag is needed.)

End with closing list </UL> tag.

<UL>
<LI> apples
<LI> bananas
</UL>

NUMBERED LISTS

 Numbered list (also called ordered list) uses <OL> instead of <UL>. Items are tagged using same <LI> tag.

<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

  1. oranges
  2. peaches
  3. grapes

<OL> is the same as <OL TYPE=1> (Arabic numbers)

<OL TYPE=A> (capital letters)
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

  1. oranges
  2. peaches
  3. grapes 

<OL TYPE=a> (small letters)
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

  1. oranges
  2. peaches
  3. grapes 

<OL TYPE=I> (Large Roman numerals)
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

  1. oranges
  2. peaches
  3. grapes 

<OL TYPE=i> (Small Roman numerals)
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

  1. oranges
  2. peaches
  3. grapes

The START attribute may be used with the OL tag to start at a specific number. Also, the VALUE attribute may be used with the LI tag to skip unwanted numbers.

<OL START=3>
<LI> oranges
<LI> peaches
<LI VALUE=7> grapes
<LI> apples  
<LI> raisins
</OL>
  1. oranges
  2. peaches
  3. grapes
  4. apples
  5. raisins
Notice how this works for a list NOT using standard Arabic numbers:

<OL TYPE=A START=3>
<LI> oranges
<LI> peaches
<LI VALUE=7> grapes
<LI> apples  
<LI> raisins
</OL>
  1. oranges
  2. peaches
  3. grapes
  4. apples
  5. raisins

DEFINITION LISTS

 Definition list usually consists of alternating term (abbreviated as DT) and definition (abbreviated as DD)

<DL>
<DT> NCSA
<DD> NCSA, National Center for Supercomputing 
     Applications, is located on campus of 
     University of Illinois at Urbana-Champaign. NCSA 
     is one of participants in National 
     MetaCenter for Computational Science and 
     Engineering.
<DT> Cornell Theory Center
<DD> CTC is located on campus of Cornell 
     University in Ithaca, New York. CTC is another 
     participant in National MetaCenter for 
     Computational Science and Engineering.
</DL>

NCSA
NCSA, National Center for Supercomputing Applications, is located on campus of University of Illinois at Urbana-Champaign. NCSA is one of participants in National MetaCenter for Computational Science and Engineering.
Cornell Theory Center
CTC is located on campus of Cornell University in Ithaca, New York. CTC is another participant in National MetaCenter for Computational Science and Engineering.

NESTED LISTS

 
<UL>
<LI> few New England states:
    <UL>
    <LI> Vermont
    <LI> New Hampshire
    </UL>
<LI> One Midwestern state:
    <UL>
    <LI> Michigan
    </UL>
</UL>

PREFORMATTED TEXT

 Use the <PRE> tag (which stands for ``preformatted'') to generate text in fixed-width font and cause spaces, new lines, and tabs to be significant

<PRE>
  #!/bin/csh                           
  cd $SCR                             
  cfs get mysrc.f:mycfsdir/mysrc.f   
  cfs get myinfile:mycfsdir/myinfile   
  fc -02 -o mya.out mysrc.f           
  mya.out                              
  cfs save myoutfile:mycfsdir/myoutfile 
  rm *                                
</PRE>


#!/bin/csh                           
cd $SCR                             
cfs get mysrc.f:mycfsdir/mysrc.f   
cfs get myinfile:mycfsdir/myinfile   
fc -02 -o mya.out mysrc.f           
mya.out                              
cfs save myoutfile:mycfsdir/myoutfile 
rm *

Hyperlinks can be used within <PRE> sections

TEXT TAGS

 Start with <tag>, where tag is desired formatting tag, to indicate beginning of tagged text

Enter tagged text

End passage with </tag>

<B>
Bold text -- Be Prepared
<I>
Italic text -- Semper Fidelis
<CODE>
for snippets of computer CODE -- The iostream.h header file. (Displayed in fixed-width font.)
<SUP>
SUPerscript (exponent) -- x 2
<SUB>
SUBscript -- a i
<STRIKE>
STRIKE-through style -- Please don't drink and drive
<U>
Underline -- Pegasus was named for the winged horse. (Don't use this. It looks too much like a hyperlink!)

<BIG>
BIGger font -- When the hammer hit her thumb, she screamed in agony.

<SMALL>
SMALLer font -- Across the room he caught a glimpse of a tiny little mouse heading toward Mr. Wilson.

SPECIAL CHARACTERS

 Four characters left angle bracket (<), right angle bracket (>), ampersand (&) and double quote (") have special meaning within HTML and therefore cannot be used ``as is'' in text

To use one of these characters in HTML document, you must enter its special character sequence instead:

&lt;
special character sequence for <
&gt;
special character sequence for >
&amp;
special character sequence for &
&quot;
special character sequence for "
&#64;
special character sequence for @
&#169;
special character sequence for ©
&copy;
special character sequence for ©
&#174;
special character sequence for ®
&reg;
special character sequence for ®
&nbsp;
special character sequence for non-breaking space

&nbsp; intended to keep words together on a line

"Elwood&nbsp;Scuggins" will appear as

Elwood Scuggins on one line

&nbsp; can be used to create spaces that the browser does not ignore

For example, "one two&nbsp;&nbsp;&nbsp;three" will appear as

one two   three

To make an indented paragraph...

"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It was a dark and stormy night." will appear as

     It was a dark and stormy night. Sam Slade pulled his old rattle-trap Ford up to the curb when he saw the light in the apartment window.

LINE BREAKS

 <BR> tag forces line break

<CENTER> -- All lines of text between <CENTER> and </CENTER> are centered between current left and right margins

HORIZONTAL RULES

 <HR> tag produces horizontal line width of browser window

Default is shaded engraved line

<HR SIZE=number> -- how thick is horizontal rule to be

<HR WIDTH=number|percent> -- Default horizontal rule is always as wide as page. With WIDTH tag, author can specify exact width in pixels, or relative width measured in percent of document width.

<HR ALIGN=LEFT|RIGHT|CENTER> -- For small rules, pushed up against left margin, right margin, or centered on page

<HR NOSHADE> -- For those times when you really want solid bar

FILE EXTENSIONS

 In following list, those extensions in red can be displayed "in-line" by most Web browsers -- no need to invoke "helper" program

HTML document
.html or .htm
Plain text
.txt
PostScript file
.ps or .eps

Portable BitMap (PBM) image
.pbm
Portable GrayscaleMap (PGM) image
.pgm
Portable PixMap (PPM) image (full color)
.ppm
Portable aNyMap (PNM) image (all 3 above)
.pnm
Tagged Image File Format (TIFF) image
.tiff or .tif
X BitMap (XBM) image
.xbm
Graphics Interchange Format (GIF) image
(pronounced like the peanut butter)
.gif
Joint Photographic Experts Group (JPEG) image
.jpeg or .jpg
Portable Network Graphics (PNG) image
(pronounced "ping" -- gif alternative started when CompuServe implied it might want royalties on all gif images)
.png

AUdio (AU) sound (UNIX)
.au
Audio Interchange File Format (AIFF) sound (Macintosh)
.aiff or .aif
WAVE (Windows)
.wav

RealAudio and RealVideo (Windows, Macintosh, UNIX)
.ram -- .ra and .rm

Moving Picture Expert Group (MPEG) movie (UNIX, Windows)
.mpeg or .mpg
QuickTime MOVie (Macintosh, Windows)
.mov
Audio Visual Interleave (AVI) for digital video and audio (Windows, Macintosh)
.avi

IN-LINE IMAGES

 To include in-line image, use

<IMG SRC="image_URL">

Big World <IMG SRC="globe.gif">
or
<IMG SRC="images/globe.gif">

Getting your own image files -- A way for CS 190W students to capture images for themselves

A large collection of public domain images (clip art) is available at OnlineBusiness.com - BESTofWEB-GUIDE. Look in the FREE STUFF section!

Put in alternative text to use if Web browser (like lynx) cannot display images

<IMG ALT= "Big World" SRC="globe.gif">

displays...

Big World

instead of globe image for character-based browsers

SIZING IMAGES

 Specify image's width and height in pixels

<IMG SRC="images/mom.gif" WIDTH=400 HEIGHT=300>

Do this for speed

Leaves right amount of space for image, but continues laying out document with hole into which image will be placed

WIDTH and HEIGHT values that differ from actual width and height of image scale image to fit

Be sure to use width and height that have same ratio as actual image or you will get strange image

<IMG SRC="images/mom.gif" WIDTH=200 HEIGHT=150>


<IMG SRC="images/mom.gif" WIDTH=600 HEIGHT=450>

Can also use percentages

<IMG SRC="images/mom.gif" WIDTH=50% HEIGHT=75%>

Browser will display image 50% as wide as screen size and 75% as high as screen size

Can specify ONLY width or height

Browser will scale other dimension appropriately and display image

<IMG SRC="images/mom.gif" WIDTH=100>

will display smaller (but appropriately scaled) image 100 pixels wide

<IMG SRC="images/mom.gif" HEIGHT=75%>

will display larger (but appropriately scaled) image 75% as high as screen size

Scanning your own images -- A way for CS 190W students to scan images

LOW AND HIGH RESOLUTION IMAGES

 IMG tag also has LOWSRC attribute

Example of LOWSRC attribute

<IMG SRC="slow.gif" LOWSRC="fast.gif"
WIDTH=400 HEIGHT=200>

Most browsers recognize LOWSRC

Those that do not just ignore it and load normal SRC image

LOWSRC image loaded on "first pass" through document

When all text and all LOWSRC images loaded, SRC images loaded on "second pass" through document

LOWSRC can be "low resolution" small (fast loading) image file

SRC can be "high resolution" large (slow loading) image file

.gif and .jpeg images can be used for either LOWSRC or SRC and can be mixed

WIDTH and HEIGHT attributes used for both LOWSRC and SRC

If no WIDTH and HEIGHT attributes given, size of LOWSRC is used for SRC

Why? The "hole" in the document for the image is determined by the size of the first image.

INTERLACED GIF IMAGES

 Standard feature of GIF image format is option to store image data in GIF file in interlaced fashion

Instead of storing image's scan lines in exact sequence, equally spaced nonadjacent sets of lines are stored together

Most Web browsers display both normal and interlaced GIFs properly

Interlaced GIF image appears to "fade in" from fuzzy to sharp focus

Example of Normal and Interlaced Images

ppmtogif has a -interlace option

Can convert an existing GIF to an interlaced GIF as follows...

cat mom.gif | giftopnm | ppmtogif -interlace > newmom.gif

JPEG images may be turned into p-JPEG (progressive-JPEG) images that do the same thing

ANIMATED GIF IMAGES

 A .gif can have more than one image per file

Becomes slide show presentation or animation

GIF89a Specification

Examples of Animated GIF Images

Web browsers can display multiple images in a single .gif file

A .gif "image" can contain several separate images, information on timing, and whether or not to "loop" the animation

Multiple images can be used along with transparency

Simple to use -- Just imbed the image inline via
<IMG SRC="images/sylvester.gif">

Tools are available to combine multiple .gif images into one "animated .gif"

For much more information and for tools, see Royal Frazier's GIF89a-based Animation for the WWW

A collection of hundreds of public domain animated gifs is available at CyberMonkey's World Animation Page.

WARNING: Browsers that cannot display multiple .gif images will usually display only the first of the set -- which may not be very meaningful!

IMAGE ALIGNMENT

 [IMAGE]By default aligns text with bottom of image

<IMG ALIGN=BOTTOM SRC=image_URL>

[IMAGE] ALIGN=TOP aligns text with top of image

<IMG ALIGN=TOP SRC=image_URL>

[IMAGE] ALIGN=MIDDLE aligns text with center of image

<IMG ALIGN=MIDDLE SRC=image_URL>

[IMAGE] With ALIGN=LEFT, graphic will float down and over to current left margin, and subsequent text will wrap around right hand side of graphic until
<BR CLEAR=LEFT>

[IMAGE] With ALIGN=RIGHT, graphic will float down and over to current right margin, and subsequent text will wrap around left hand side of graphic until <BR CLEAR=RIGHT>

HSPACE and VSPACE leave horizontal and vertical white space between the image and things around it

[IMAGE] <IMG SRC=image_URL HSPACE=100>

USING AN IMAGE AS HYPERTEXT LINK

 <A HREF = "construction.html">
<IMG SRC = "images/bxd.gif"></A>

BACKGROUND ATTRIBUTES

 An image that is to be used as background for document

Used to tile full background of document-viewing area

<BODY BACKGROUND="metal/brushed_aluminum.gif"> Document here</BODY>

BGCOLOR ATTRIBUTE

(Note: Much of the material below concerning colors was researched and written by Kevin Brewer of Delco Electronics and is used with his permission.)

Change color of background without having to specify separate image that requires another network access to load

Color samplers are available at InfiNet's Background Colors, HYPE's Color Specifier, and Doug Jacobson's RGB Color Chart

<BODY BGCOLOR="color"> Document here</BODY>

Where "color" is "#RRGGBB" hexadecimal red-green-blue (RGB) triplet or a color name

RGB color value consists of three two-digit hexadecimal numbers (00-FF)

Each two-digit value specifies intensity of corresponding color

Color value #FF0000 is red because red number is set to highest value with green and blue set to zero

Pound sign (#) optional -- but generally used with RGB values

16 "primary" color names:

Aqua Black Blue Fuchsia
Gray Green Lime Maroon
Navy Olive Purple Red
Silver Teal White Yellow

These colors display as:

Aqua Black Blue Fuchsia
Gray Green Lime Maroon
Navy Olive Purple Red
Silver Teal White Yellow

These are standard 16 colors supported in Windows VGA palette

All the color names we know (supported at least by Netscape)...

Black Blue Brown Cyan
Aqua 		Gold Gray Green
Lime Magenta
Fuchsia 		Maroon Navy Olive Orange Orchid
Pink Plum Purple Red Salmon Scarlet Sienna
Silver Teal Turquoise Violet Wheat White Yellow

These display as:

Black Blue Brown Cyan
Aqua 		Gold Gray Green
Lime Magenta
Fuchsia 		Maroon Navy Olive Orange Orchid
Pink Plum Purple Red Salmon Scarlet Sienna
Silver Teal Turquoise Violet Wheat White Yellow

Curiously color name RED and value #FF0000 are the same

Color name BLUE and value #0000FF are the same

BUT, color name GREEN and value #00FF00 are NOT the same -- probably because #00FF00 looks more like LIME

TEXT ATTRIBUTE

Control color of all normal text in document

<BODY TEXT="color"> Document here</BODY>

LINK, VLINK, AND ALINK ATTRIBUTE

VLINK stands for visited link, and ALINK stands for active link. Default coloring of these is LINK="BLUE", VLINK="PURPLE", and ALINK="RED".

<BODY LINK="color" VLINK="color" ALINK="color"> Document here</BODY>

<BODY BGCOLOR="BLACK" TEXT="#F0F0F0" LINK="YELLOW" VLINK="#22AA22" ALINK="#0077FF">

CHANGING FONT SIZE, COLOR, AND FACE

 <FONT SIZE=value>...</FONT>

Can change font size. Valid values range from 1-7. Default FONT SIZE is 3. Value given to size can optionally have a '+' or '-' in front of it to specify that it is relative to document BASEFONT. Default BASEFONT is 3.

This is <FONT SIZE=+3>

This is <FONT SIZE=+1>

This is <FONT SIZE=-2>

<FONT SIZE=+1> is the same as <BIG>

<FONT SIZE=-1> is the same as <SMALL>

<FONT COLOR=color>...</FONT>

Can change font color. "Color" is "#rrggbb" hexadecimal red-green-blue triplet or a color name used to specify color

This is <FONT COLOR="BLUE">

<FONT FACE=face>...</FONT>

<FONT FACE="face1,face2, ... ,facen"> ... </FONT>

Can change font face. Specify one or more font faces to use (in preference order). If none are available, standard face (usually "Times") will be used.

This may be <FONT FACE=Utopia>

Can change any combination of the three.

<FONT FACE=value(s) SIZE=value COLOR=color>...</FONT>

We advise you to use <FONT FACE="Helvetica,Utopia" SIZE=+3 COLOR="RED"> extreme caution</FONT> when handling sulfuric acid.

We advise you to use extreme caution when handling sulfuric acid.

TABLES
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=2>
<TR>
<TD>Chicago</TD> <TD>75</TD> <TD>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> <TD>1254</TD> <TD>Good</TD>
</TR>
</TABLE>

Tables begin with <TABLE ...> tag and end with </TABLE> tag

By default, tables have no borders or same effect via BORDER=0

Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=0>
<TR>
<TD>Chicago</TD> <TD>75</TD> <TD>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> <TD>1254</TD> <TD>Good</TD>
</TR>
</TABLE>

<TR ...></TR> stands for table row

<TD ...></TD> stands for table data, and specifies standard table data cell. Each row need not have same number of cells specified. Short rows will be padded with blank cells on the right. Default alignment of table data is ALIGN=LEFT.

Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=2>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

<TH ...></TH> stands for table header. Header cells are identical to data cells in all respects, with exception that header cells are in bold FONT, and have default ALIGN=CENTER.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=2>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

<CAPTION ...></CAPTION> represents caption for table. CAPTION tags should appear inside TABLE but not inside table rows or cells. CAPTION accepts alignment attribute that defaults to ALIGN=TOP but can be explicitly set to ALIGN=BOTTOM. Captions are always horizontally centered with respect to table, and may have their lines broken to fit within width of table.

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=2>
<CAPTION>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=2>
<CAPTION ALIGN=BOTTOM>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

BORDER attribute appears in TABLE tag. Borders drawn around all table cells. Borders can be arbitrarily thick.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=10>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

COLSPAN attribute can appear in any table cell (TH or TD) and it specifies how many columns of table this cell should span. Default COLSPAN for any cell is 1.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good
Detroit No Data Available 

<TABLE BORDER=5>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
<TR>
<TD>Detroit</TD> 
<TD COLSPAN=2>No Data Available</TD>
</TR>
</TABLE>

ROWSPAN attribute can appear in any table cell (TH or TD) and it specifies how many rows of table this cell should span. Default ROWSPAN is 1.

City Attendance Rating
Chicago 75 Excellent
1254 Good
420 Excellent 

<TABLE BORDER=5>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD ROWSPAN=3>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>420</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
</TABLE>

CELLSPACING=<value>

By default cell spacing of two. Cell spacing is amount of space inserted between individual cells in table.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=5 CELLSPACING=10>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

CELLPADDING=<value>

By default cell padding of one. Cell padding is amount of space between border of cell and contents of cell.

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=5 CELLSPACING=10 CELLPADDING=15>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

Tables can be centered and WIDTH tag can be used to specify percentage of screen width to use for table

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<CENTER>
<TABLE BORDER=5 WIDTH="75%">
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>
</CENTER>

Tables can use ALIGN=LEFT or ALIGN=RIGHT in which case they work just like images with text wrapping around them

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. 

<TABLE BORDER=5 ALIGN=LEFT>
<CAPTION>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>
This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.
<BR CLEAR=LEFT>

Figure 4.12. Attendance at and Ratings of the last two seminars.
City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. 

<TABLE BORDER=5 ALIGN=RIGHT>
<CAPTION ALIGN=BOTTOM>
Figure 4.12.  Attendance at and 
Ratings of the last two seminars.
</CAPTION>
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD>Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>
This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.
<BR CLEAR=RIGHT>

Newest Web browsers support table cell background colors and background images

BGCOLOR and BACKGROUND attributes can be used with TABLE, TH, TR, TD tags

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good 

<TABLE BORDER=5 BGCOLOR="YELLOW">
<TR>
<TH>City</TH> 
<TH>Attendance</TH> 
<TH>Rating</TH>
</TR>
<TR>
<TD>Chicago</TD> 
<TD ALIGN=RIGHT>75</TD> 
<TD ALIGN=CENTER>Excellent</TD>
</TR>
<TR>
<TD BGCOLOR="PINK">Indianapolis</TD> 
<TD ALIGN=RIGHT>1254</TD> 
<TD ALIGN=CENTER>Good</TD>
</TR>
</TABLE>

City Attendance Rating
Chicago 75 Excellent
Indianapolis 1254 Good

<TABLE BORDER=5 BACKGROUND="images/Vtile.jpg"> <TR> <TH>City</TH> <TH>Attendance</TH> <TH>Rating</TH> </TR> <TR BACKGROUND="images/water.jpg"> <TD><FONT COLOR="WHITE"> Chicago</FONT></TD> <TD ALIGN=RIGHT> <FONT COLOR="WHITE"> 75</FONT></TD> <TD ALIGN=CENTER> <FONT COLOR="WHITE"> Excellent</FONT></TD> </TR> <TR> <TD BACKGROUND="images/island.gif"> Indianapolis</TD> <TD ALIGN=RIGHT>1254</TD> <TD ALIGN=CENTER>Good</TD> </TR> </TABLE>
Can be used to enclose text in colored box.
Mississippi River Campaign
This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. 

<CENTER>
<TABLE WIDTH=75%>
<TR>
<TD ALIGN=CENTER 
BGCOLOR="SILVER">
Mississippi River Campaign
</TD> 
</TR>
<TR>
<TD BGCOLOR="YELLOW">
This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.</TD> 
</TR>
</TABLE>
</CENTER>

VALIGN tag controls whether text inside the table cell is aligned to TOP of cell, MIDDLE of cell (default), or BOTTOM of cell.

Mississippi River Campaign This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North. 

<TABLE BORDER=5>
<TR>
<TD>Mississippi River Campaign</TD> 
<TD>This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.  This victory, along with 
that at Gettysburg, Pennsylvania,
(July 1-3, 1863) tilted the war 
in favor of the North.</TD> 
</TR>
</TABLE>

Mississippi River Campaign This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North. 

<TABLE BORDER=5>
<TR>
<TD VALIGN=TOP>Mississippi River Campaign</TD> 
<TD>This crucial Civil War campaign 
(April-July 1863) captured the
last Confederate fortress on the 
Mississippi River, divided the
Confederacy in two, and gave the 
Union complete control of the
river.  This victory, along with 
that at Gettysburg, Pennsylvania,
(July 1-3, 1863) tilted the war 
in favor of the North.</TD> 
</TR>
</TABLE>

Tables can contain hyperlinks, images, images that are hyperlinks, and different color fonts

Prof. Dunsmore's Table of Interesting Things
Thank you for Visiting! Advanced HTML Guide 

<TABLE BORDER>
<TR>

<TD ALIGN=CENTER>
<IMG SRC="images/WWWlogo.gif"></TD> 

<TD><FONT SIZE=+2>
Prof. Dunsmore's Table of Interesting Things
</FONT></TD> 

<TD ALIGN=CENTER>
<IMG SRC="images/globe.gif"></TD>

</TR>

<TR>

<TD><FONT COLOR="RED">
Thank you for Visiting!</FONT></TD> 

<TD ALIGN=CENTER>
<A HREF="http://www.cs.purdue.edu/people/bxd">
<IMG SRC="images/bxd.gif"></A></TD> 

<TD><A HREF="advhtmlguide.html">
Advanced HTML Guide</A></TD>

</TR>
</TABLE>