Table, Table, Table

Agenda

1. Table, Table , Table
2. Imagemaps
3. Fonts Color
4. Programming On The Web
5. Conclusion

Examples for Tables:

E.g. 1: (3 x 3 Table)

1	2	3
4	5	6
7	8	9

E.g. 2: ("Table of Content" Table)

Link to IBM Link to HP Link to Microsoft Local Server Link

This is some text of the current site ... text, text,text,text,text,text,text,text,text,text,text,text,text,text List list list list list List list list list list List list list list list List list list list list List list list list list

E.g. 3: (A Table within a Table)

Some Text Some Text

Some more Text

Some text before another Table

 

Introduction to Tables

Tables

Before HTML tags for tables were finalized, authors had to carefully format their tabular information within <PRE> tags, counting spaces and previewing their output. Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages. (Check out the NCSA Relativity Group's pages for an excellent, award-winning example.)

Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each item. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.

General Table Format

The general format of a table looks like this:

<TABLE>                                     <== start of table definition

<CAPTION> caption contents </CAPTION>       <== caption definition

<TR>                                        <== start of first row definition
<TH> cell contents </TH>                    <== first cell in row 1 (a head)

<TH> cell contents </TH> <== last cell in row 1 (a head)

</TR> <== end of first row definition

<TR> <== start of second row definition

<TD> cell contents </TD> <== first cell in row 2

<TD> cell contents </TD> <== last cell in row 2

</TR> <== end of second row definition

<TR> <== start of last row definition

<TD> cell contents </TD> <== first cell in last row ...

<TD> cell contents </TD> <== last cell in last row

</TR> <== end of last row definition

</TABLE> <== end of table definition

So, a table with content like the following:

Will have HTML coding like:

<table border="1">

<tr> <th colspan="2"><h4>Table Main Title</h4></th> </tr>

<tr> <td colspan="2"><b>Some Notes under the Table, we can put whatever we want into it ...............................................</b></td> </tr>

<tr> <th>Attribute</th> <th>Description</th> </tr>

<tr> <td nowrap>

	<ul>
    	    <li>A list 1</li>
	    <li>A list 2</li> 
	</ul>

     </td>

     <td nowrap>
	<ul>
	    <li>list 1</li>
	    <li>list 2</li>
	</ul>
     </td>
</tr>

</table>

The <TABLE> and </TABLE> tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it. This lets you easily display tables like the one above with a single cell, such as Table Attributes, spanning columns of the table.

Tables for Nontabular Information

Some HTML authors use tables to present nontabular information. For example, because links can be included in table cells, some authors use a table with no borders to create "one" image from separate images. Browsers that can display tables properly show the various images seamlessly, making the created image seem like an image map (one image with hyperlinked quadrants).

Using table borders with images can create an impressive display as well. Experiment and see what you like.

Image Map

Client-side Imagemaps

You have certainly seen imagemaps on the web somewhere. An imagemap is an image that is divided (invisibly) into different areas. Clicking on each area sends the browser to a different web site. A standard imagemap works by using a cgi program on your web server to assign URLs to the different areas. While this has the advantage that it will work with all graphical browsers, it also involves extra communication with the server, which can take a little bit of time.

A simpler method is to have the browser itself look at where the user clicked, and assign the URL itself. This is where the term "client-side" comes from - the browser does the work of operating the imagemap. As with all Netscape tags (actually this one was developed by Spyglass), remember that an imagemap created in the manner I describe here will not work for many people, so you should provide a text alternative as well.

To create a client-side imagemap, you need only two things: an image, and a list of regions on the image and the URL that you want to assign to each region.

First, the image. Since it will be displayed by the browser, it should be in either XBM, GIF, or JPEG format. In this example I'll use a GIF file called "clientimage.GIF". You will also need to know the size, in pixels, of the image. For this example, clientimage.GIF is 218 pixels wide and 74 pixels high.

Second, the map information. This is the list of regions and the URLs that go with them. The actual HTML that makes up a map is pretty straightforward. It is contained between the <MAP> and </MAP> tags. To begin, you need to assign a name to your map. A good system is to use the same name that you use for your image, and replace the extension with ".map".

You then describe the different areas by giving the shape and the coordinates. The only shape that is supported in the same way by Netscape Navigator and Spyglass Mosaic is the rectangle. To define a rectangular area, use the AREA tag, like this:

<AREA SHAPE = "RECT" COORDS = "xupleft, yupleft, xloright, yloright" HREF = "URL">

The italicized items must be customized for your page. xupleft is the number of pixels between the left edge of the image and the left edge of the rectangular area, and yupleft is the number of pixels between the top of the image and the top of the rectangular area. That is how pixels are generally counted; they start from the upper left corner of the image. xloright is then the number of pixels between the left edge of the image and the right edge of the rectangular area, and yloright is the number of pixels between the top of the image and the bottom of the rectangular area. URL is the URL of what you want to associate with the rectangular area; this may be either a relative or an absolute link, just like in a standard <A HREF> tag.

Let's take a look at how this works.

Example 6: A client-side imagemap

<IMG SRC = "clientimage.gif" USEMAP = "#clientimage.map">

<MAP NAME = "clientimage.map">
<AREA SHAPE = "RECT" COORDS = "0, 0, 109, 74" HREF = "#T1">
<AREA SHAPE = "RECT" COORDS = "110, 0, 218, 74" HREF = "#T9">
</MAP>

Implementation of client-side imagemaps will spread to more browsers, but unfortunately it looks like it will be different on each - already Spyglass Mosaic, Netscape Navigator, and Microsoft's Internet Explorer do some things differently. The above should work on all three browsers. However, you may want to have the same imagemap handled on the client-side by browsers with that capability, and on the server-side (the standard method) for other graphical browsers. This is possible, as shown in the next example.

To begin, set up your imagemap in the standard fashion. Then define a MAP section that gives the same links and regions. To set up the equivalent of the default URL, make the final entry in the MAP section a region that covers the entire image, and assign the default URL to it. Then, combine the A HREF and ISMAP tags used for standard imagemaps with the USEMAP for client-side imagemaps, as shown in the next example.

Fonts Color

The FONT tag, introduced with versions 1.x of Netscape Navigator, can also be used to change the color of the enclosed text, when used with version 2.x. The color must be specified using the same hexadecimal RGB notation used for defining background colors (see the 1.x Netscape tutorial page). It is pretty simple, as shown below.

Example 8: Changing font color

The <FONT COLOR = "#ff0000">color of your text</FONT> may be changed.

The color of your text may be changed.

HTML Project Management Tools

• Build Process
• Macro
• FrontPage 97
• Download.com at http://www.download.com has a lot of demo-ware to try out.
• etc
  
  

Programming on the Web

• Java Programming

• JavaScript Programming

• CGI-BIN Programming (C, C++, Java, Perl, REXX, etc)

Conclusion

• Basic Understanding of WWW / Internet Concept

• Basic Codeing for HTML

• Use of the WWW for Finding Useful Information

Lab

Update your home page from the last lab to have the following like and feel:

Image 4

Note:

• Add any hotlink you would like to link to. It could be both internal or external.

• You might try to use a background color or image as well

• Please look at my main index page http://www.openloop.com as an example !

• Solution is in here

Copyright 1996-2001 OpenLoop Computing. All rights reserved.