Creating web pages X

In this installment, we'll cover tables. First I'll include three examples, then I'll describe how they were done.

What tables can be used for

Presenting data in tabular form

The most obvious use of tables is the presentation of data, like this:

Quarterly Growth
Year/Quarter 1st 2nd 3rd 4th
1997 1024 1204 1804 2084
1996 670 676 789 900
1995 49 50 200 456

Arranging elements on the page

Here we use them to arrange four images as a quad of buttons, with each being a link to another page:

Altavista Yahoo
Dejanews Excite

Splitting text into more than one column

You can use tables to split text into more than one column, like this:

Two columns of humor

Yugo Jokes

  • A man walks into an auto parts store and says, "I'll take a gas cap for a Yugo" "Sounds like a fair trade", says the counter worker.
  • Why do Yugo's have a heater for the back window? To keep your hands warm when pushing.
  • Why don't Yugo's sustain much damage in a front-end collision? The tow truck takes the impact.
  • How do you double the value of a Yugo? Fill the tank!
  • What is found on the last two pages of every Yugo owner's manual? The bus schedule.
  • What do you call a Yugo with a flat tire? Totalled.

The DHMO Menace

The Invisible Killer

Dihydrogen monoxide is colorless, odorless, tasteless, and kills uncounted thousands of people every year. Most of these deaths are caused by accidental inhalation of DHMO, but the dangers of dihydrogen monoxide do not end there. Prolonged exposure to its solid form causes severe tissue damage. Symptoms of DHMO ingestion can include excessive sweating and urination, and possibly a bloated feeling, nausea, vomiting and body electrolyte imbalance. For those who have become dependent, DHMO withdrawal means certain death.

Dihydrogen monoxide:

  • is also known as hydrogen hydroxide, and hydroxyl acid.
  • is the major component of acid rain.
  • is found in high concentrations in beer.
  • contributes to the "greenhouse effect."
  • may cause severe burns.
  • contributes to the erosion of our natural landscape.
  • accelerates corrosion and rusting of many metals.
  • may cause electrical failures and decreased effectiveness of automobile brakes.
  • has been found in excised tumors of terminal cancer patients.
  • in solid form, can contribute to hazardous conditions which affect the entire transportation industry.

Contamination Is Reaching Epidemic Proportions!

Quantities of dihydrogen monoxide have been found in almost every stream, lake, and reservoir in America today. But the pollution is global, and the contaminant has even been found in Antarctic ice. DHMO has caused millions of dollars of property damage in the midwest, and recently California. Huge dhmo formations in the sky block much solar energy from the earth. These formations even occur in rual areas!

Despite the danger, dihydrogen monoxide is often used:

  • as an industrial solvent and coolant.
  • in nuclear power plants.
  • in the production of styrofoam.
  • as a fire retardant.
  • in many forms of cruel animal research.
  • in the distribution of pesticides. Even after washing, produce remains contaminated by this chemical.
  • as an additive in certain "junk-foods" and other food products.

Companies dump waste DHMO into rivers and the ocean, and nothing can be done to stop them because this practice is still legal. The impact on wildlife is extreme, and we cannot afford to ignore it any longer!

The Horror Must Be Stopped!

The American government has refused to ban the production, distribution, or use of this damaging chemical due to its "importance to the economic health of this nation." In fact, the navy and other military organizations are conducting experiments with DHMO, and designing multi-billion dollar devices to control and utilize it during warfare situations. Hundreds of military research facilities receive tons of it through a highly sophisticated underground distribution network. Many store large quantities for later use.

It's Not Too Late!

Act NOW to prevent further contamination. Find out more about this dangerous chemical. What you don't know can hurt you and others throughout the world. Send email to no_dhmo@circus.com.

Original author: Coalition to Ban DHMO, 211 Pearl St., Santa Cruz CA, 95060

The HTML used to create tables

Simple tabular representation of data

A table is created with the <table> and </table> tags. A row within a table is created with the <tr> and >/tr> tags. A column within a row is created with the <td> and </td> tags.

Here is the code that produced the first table example, the boring quarterly table: 

<table border=1>
<caption>Quarterly Growth</caption>
<tr>
<td>Year/Quarter</td>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
</tr>
<tr>
<td>1997</td>
<td>1024</td>
<td>1204</td>
<td>1804</td>
<td>2084</td>
</tr>
<tr>
<td>1996</td>
<td>670</td>
<td>676</td>
<td>789</td>
<td>900</td>
</tr>
<tr>
<td>1995</td>
<td>49</td>
<td>50</td>
<td>200</td>
<td>456</td>
</tr>
</table>

The "border" attribute inside the <table> tag is used to specify a border with a width of one pixel. The <caption> and </caption> tags bracket a caption for the table.

Arranging layout elements with tables

To arrange the four images of buttons above, I made a table with two rows of two columns, and put one <img> element in each. I made each picture a link to another page, so that when the user clicks on the button, he/she is taken to that page.

Here's the source: 

<table border=1>
<tr>
<td><a href="http://altavista.digital.com/"><img src="altavista.gif" alt="Altavista"></a></td>
<td><a href="http://www.yahoo.com/"><img src="yahoo.gif" alt="Yahoo"></a></td>
</tr>
<tr>
<td><a href="http://www.dejanews.com/"><img src="dejanews.gif" alt="Dejanews"></a></td>
<td><a href="http://www.excite.com/"><img src="excite.gif" alt="Excite"></a></td>
</tr>
</table>

Notice that I used a border width of one pixel to frame the buttons. Some arrangements will look better with no border.

Splitting text into two columns with tables

To split text into two columns using tables, set up a table with one row, and two element in that row. Put the first column of text into the first element (<td> and <td>), and the second column of text into the second element.

You'll often see one column of text with a different background color. This is done by specifying the color for the cell ( the entire column in this case) with the "bgcolor" attribute for the <td> tag. From the Yugo column of the Yugo and DHMO example: 

<td valign="top" bgcolor="#d0d0d0">

Here's where I would include the entire section of code that produced the Yugo and DHMO example. I'm afraid that it's so big that it might be a bit overwhelming. I'll put it on its own page and provide a link to it instead.

Next time I might cover frames. I'm not sure, since IMHO, they are rarely useful in any practical way. Any votes yeah or neah?