What is A Table?

An HTML table arranges items in column/row fashion. Tables are great for creating event calendars, statistical summaries and other informational synopses. A good example of table usage in this fashion is my on-line syllabus. Besides the obvious usage of tables to display information which lends itself to a tabular format, there are many other ways to put tables to good use. If you cannot find a "standard" way of arranging things just the way you want them, using a table is a great workaround and will usually give you the results you want to achieve. For example, tables are a great way to maximize page space. Given an extremely long list of items, using ordinary list syntax would not allow one to display the entire list on a single page. This is something not terribly convenient for the reader. With a table, however, you can create a list which spans multiple columns, thus allowing the reader to see most, if not all items simultaneously.

Tables come in two primary flavors: those with borders and those without. A border is kind of the opposite of a horizontal rule: it gives a "framed" appearance rather than a chiseled, indented look. One of my favorite uses of tables is to "frame" large pictures. I simply create a single-item table consisting of the graphical image that I want to "frame", specify the size of my border and voila! I have a picture which appears to be framed into the page. Use of borders as an aesthetic tool is kind of subjective, but I generally use borders when trying to graphically display information in an ordered fashion. When I am using table more for "formatting" purposes, such as in the list example, borders are unnecessary and may even detract from the effect I am trying to achieve.

One of the other advantages of using tables is that they help you work around formatting limitations in "standard" HTML. For example, say you have two images, one tall and narrow, and the other short and wide, and you want to situated them so that the shorter image is to the side of the taller image and centered. You might try using the "absmiddle" attribute for the taller image, but you will find that that won't do the job. The bottom of the shorter image will be centered with the taller one. One workaround is to create a two-item, two-column table, with each column holding an image, and then specifying that the vertical alignment in each data item is to be middle. By omitting the border syntax, the images will be aligned correctly without any external indication that a table was used.

How Do I Create A Table?

The syntax for creating a table is fairly straightforward. However, using these simple construct, some fairly complex tables can be created. The best way to become handy with tables is to simply work through some examples. Examine the table below, then use the view source feature of your browser to examine how it works

Four Primary Elements To a Table:

1. Table <table></table>
   Options:
   1. border = #
   2. cellspacing = #
   3. cellpadding = #
   4. width = #
   5. hspace = #
   6. vspace =#

2. Row <tr></tr>

3. Column

4. Caption <caption></caption>
   Options:
   1. align = top, bottom

5. Heading <th></th>
   Options:
   1. valign = top, middle, bottom
   2. align = right, left, center, justify, decimal

6. Data Item <td></td>
   Options:
   1. valign = top, middle, bottom
   2. align = right, left, center, justify, decimal
   3. colspan = #
   4. rowspan = #
   Notes on table design:
   • The <td> and <th> tags can be used like the <li> tag: without a closing tag
   • You may prefer to have a closing tag in your cells if you are going to be using fancy formatting
   • The <center> element and the <td> element can contain other formatting, including links, formatting, and graphics!
   • The programmer is responsible for keeping the data lined up! Make sure you have the same number of cells in each row
   • It's easiest to create a table by sketching it on paper first, then translating it into code cell by cell
   • Proper indentiation will make keeping track of your table design MUCH easier

   Image Maps

   Definition

   • An image map is an inline image of any type which has been somehow modified to allow the user to click on it.
   • Image maps have HOT SPOTs defined as special regions on the picture.
   • Each hot spot has a URL associated with it
   • When the user clicks on an image;
   • A program interprets the x and y coordinates of the mouse pointer
   • The program looks up whether the point indicated is part of a hot spot
   • The browser is given the URL associated with that hot spot
   • The browser loads up the new URL

   Server - Side

   • The program that interprets the information is stored on the SERVER
   • It can only be placed at certain places on the server
   • The information consists of a database defining the hotspots,,,
   • and another database that defines the url associated with each hot spot
   • This approach requires CGI scripting (stay tuned...)
   • It is tedious and difficult to modify

   Client - Side

   • Newer browsers such as Netscape 2.0 and Internet Explorer support this feature
   • The image information is stored in special tags as a part of the html document
   • Interpretation of the tags is left to the CLIENT program
   • All the needed information is in the html file
   • The tags can be cryptic and difficult to write
   • You still would need to know the exact x and y coordinates of hot spots

   Image map Editors

   • This type of utility has been around for a while
   • The newest ones make client - side image maps VERY easy
   • Example: MapEdit
   • Prompts you for an html file to modify
   • Asks which existing inline graphic you want to turn into an image map
   • Brings up the image in a special drawing tool
   • Allows you to draw the hotspots on the image
   • Asks you for the URL associated with each hotspot
   • Automatically adds the needed tags to your document
   • Older image map editors simply make the coordinate map needed for server - side image mapping
   • It is not too difficult to convert this information into a client - side image map. (look up the html codes for this)

   ---

   Lab Assignment

   ---

   Make a file that includes a table.
   Guidelines for the table
   • Sketch out your table on paper first!
   • Some possible ideas:
     • A weekly schedule
     • Re - Create part of the class syllabus
     • Use a table to simulate columns on a page
     • Use a table with linked images as a "poor man's image map"
   • It should be at least 4 X 5 cells large
   • Have a different number of rows and columns (Don't do 2x2 or 7x7 to make it easier)
   • Use proper indentation and formatting
   • Try some type of fancy formatting, including an image in a cell, including links in a cell
   • Be sure the appropriate permissions are given for the file, and that you have a link to the project from your home page
   Extra Credit (five points worth!)
   • Make a client - side image map
   • Make the associated files that it will call (if they don't already exist)
   • Use an image map editor to get the coordinates.

   ---

   
   © 1996, Ted D. Biggs, Andy Harris
   Dept. of Computer and Information Science,
   Indiana University, Purdue University, Indianapolis
   Email: tbiggs@klingon.iupucs.iupui.edu