Tables can of course be used to present data. Lots of e-commerce sites use tables in their dynamically created HTML pages. After all, tables make it much easier to present a clear summary of the details of a comple multi-part order.
Here is a small table:
| Examination | |||
|---|---|---|---|
| Fail | Pass | ||
| Practical | Fail | 35 | 3 |
| Pass | 29 | 163 | |
That table was generated by the following code:
<table border="2" align="center"> <caption> Results for Sorcery 121</caption> <tr> <td colspan=2 rowspan=2> </td> <th colspan=2 align=center> Examination</th> </tr> <tr> <th> Fail</th> <th> Pass</th> </tr> <tr align=center> <th rowspan=2> Practical</th> <th> Fail</th> <td> 35</td> <td> 3</td> </tr> <tr align=center> <th> Pass</th> <td> 29</td> <td> 163</td> </tr> <table>
This code specified that the table should be drawn with a border, and placed a "caption" across the top of the entire table. You then get the defintion of rows. The code from a start tr to an end tr will specify a list of entries in a row. These entries can be label types, th, or data td.
This table is a little more complex than most in that it makes some entries occupy more than one row/column of the table.
Tables have an important role in helping layout data entry forms. This is illustrated on the forms page.
But don't be so unimaginative in your use of tables!
Tables can contain almost anything in their rows - pictures for instance. These pictures can be hyper-links to other pages (or intra-page links, inter-page links are usually more appropriate). What is more, you can associate lots of Javascript code with the hyperlinks, and this can make your table substitute for an image map and perform additional tricks.
This table is really an array of 8 images (3, 3, 2 by rows). It has five (intra-page) links; three on the top row and two in the bottom row. It also has code that changes the images displayed.
If you move your pointer over the hyperlinks in the top row, descriptive text will appear in the center. The images in the bottom row change as the mouse button passes over them.
|
|
|
|
|
|
< table border=0 cellpadding=0 cellspacing=0 width=600>
< tr>
< td valign=bottom align=center>
< a href="#Sci"
ONMOUSEOUT="resetText()"
ONMOUSEOVER="chooseText(1)">
< img src=images/science.gif border="0"
width="180" height="140"
Alt="Science">
< /a>
< a href="#Photo"
ONMOUSEOUT="resetText()"
ONMOUSEOVER="chooseText(2)">
< img src=images/photo.gif border="0"
width="150" height="140"
Alt="Photo">
< /a>
< a href="#Rocks"
ONMOUSEOUT="resetText()"
ONMOUSEOVER="chooseText(3)">
< img src=images/rock.gif border="0"
width="170" height="140"
Alt="Rocks">
< /a>
< /td>
< /tr>
< tr>
< td valign=bottom align=center>
< img src="../images/side.gif" width="100" height="180">
< img src="../images/home.gif" width="300" height="180" name="text">
< img src="../images/side.gif" width="100" height="180">
< /td>
< /tr>
< tr>
< td valign=bottom align=center>
< a href="#Toys"
onMouseOver="imgOn('toyimg')"
onMouseOut="imgOff('toyimg')">
< img src="../images/toysA.gif" width="250" height="40" name="toyimg">
< /a>
< a href="#Paintings"
onMouseOver="imgOn('paintimg')"
onMouseOut="imgOff('paintimg')">
< img src="../images/paintsA.gif" width="250" height="40" name="paintimg">
< /a>
< /td>
< /tr>
< /table>
It is just a table with three rows. Each row contains "one data item". The data item in the first row consists of three images that also act as hypertext links. The data item in the second row consists of three images; no links or anything. The bottom row is composed of two images.
Note how many of the image items have "name" properties defined. The Javascript code that changes images will work using these names.
The two links at the bottom each have a pair of images - an "off" image (the default) and an "on" image. The hyperlink tag contains calls to Javascript code. When the mouse cursor passes over one of these fields the function "imgOn" gets called; when the mouse cursor leaves the field, the function "imgOff" gets called. These functions change the images shown in these fields.
Similar "mouse over"/"mouse out" events on the top images result in calls to "chooseText()" and "resetText()" functions.
The Javascripting for these effects consists of some code that gets automatically executed when the page is loaded and some function definitions. The automatically executed code initializes arrays of images.
choices = new ImageArray(3);
choices[1].src = "../images/sciwords.gif"
choices[2].src = "../images/photowords.gif"
choices[3].src = "../images/rockwords.gif"
toyimgon = new Image();
toyimgon.src = "../images/toysB.gif";
paintimgon = new Image();
paintimgon.src = "../images/paintsB.gif";
toyimgoff = new Image();
toyimgoff.src = "../images/toysA.gif";
paintimgoff = new Image();
paintimgoff.src = "../images/paintsA.gif";
The function "ImageArray" is really a constructor for an array of Image objects.
function ImageArray(n) {
this.length = n
for (var i = 1; i*lt;=n; i++) {
this[i] = new Image()
}
return this
}
The change functions simply reset the source files that are to be used with specific named images in the document:
function chooseText(num) {
document.images.text.src = choices[num].src
}
function resetText() {
document.images.text.src = "../images/home.gif"
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
}
}
Here are the phony links needed by the table shown:
Here are the details of Acme Antiquities current stock of historical scientific instruments.
Here are the details of Acme Antiquities current stock of old cameras:
Here are the details of Acme Antiquities current stock of pebbles and similar junk:
This is supposedly another page where we look at old toys.
This is supposedly another page with Acme Antiquities' painting gallery.