Table Tutor-

Do it with a Table!








(YES,THIS TABLE IS A TABLE!)
Table tags are by far the most useful tags you will find. When it comes to page layout you can achive just about anything using these tags. Following are few examples and ideas for you. Some you might find useful, some are just showing off. But all will show some of the versatility of the <TABLE> tags.

(This page is fairly colorful. If you don't see color then maybe you oughtta put that tired old browser to pasture. I happen to know where you can get a good deal on a new one.)
If you can read this, your browser understands the color commands just fine!
 If you can read this, your browser doesn't display table colors. Sorry bud!

Remember, you'll find a whole chartful of background color codes right here.

The Bill of Rights
Passed by Congress September 25, 1789.
Ratified December 15, 1791.

AMENDMENT I
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
AMENDMENT II
A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.
AMENDMENT III
No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

I feel guilty cutting this document short so I figure if I provide a link to the U.S. Constitution in it's entirety, I have made up for the 'wrong'.

Here is the same table with all the borders turned on and all the guts torn out. It will help you visualize how it goes together. Also, it will be easier for you when you look at the source... less cluttered.

The Bill of Rights
Passed by Congress September 25, 1789.
Ratified December 15, 1791.
AMENDMENT I empty1
text of Amendment I...
AMENDMENT II empty 2
text of Amendment II...
AMENDMENT III empty 3
text of Amendment III...
I feel guilty...

Here's a simple chessboard. Not super useful, but making one is great practice! Theoretically you could probably use this with JavaScript and play chess with someone through a web page.

 

 
Another (less colorful) example using the Bill of Rights again.

The Bill of Rights
Passed by Congress September 25, 1789.
Ratified December 15, 1791.
AMENDMENT
I		    Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
AMENDMENT
II		    A well-regulated militia, being necessary to the security of a free State, the right of the people to keep and bear arms, shall not be infringed.
AMENDMENT
III		    No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

You can make bar graphs with just table tags and a few colored 2x2 dots. It's not all that hard and once it's done, it's easy to change. Plus it can do things a regular image can't. Like suppose you needed to change it alot. Or what if you made it part of results generated by a CGI, Java, or JavaScript program. This technique lends itself very well to "on-the-fly" graphing.

  Joe's Widget Mfg. Co. Inc.
Unit production January-June

RED WIDGETS       BLUE WIDGETS       TUNE-UP KITS
UNITS
in
thousands 		150

100

50

0

     
      
      
      
      
      
    JAN FEB MAR APR MAY JUN

This is a nice effect. It's kind of a pain to do initially, but updates are easy if you're neat & organized with you're HTML coding.

Punch Gran Cru Honduras
Cigar           Length Ring Wrapper Box of Price Single
Britania 6.25 50 Natural 25 96.75 4.55
Diademas 7.25 54 Natural 25 102.50 4.80
Monarcas 6.75 48 Natural 10 57.00 6.40
Prince Consort 8.5 52 Natural 10 48.00 5.65
Robusto 5.25 50 Maduro 20 75.00 4.40
Robusto 5.25 50 Natural 20 75.00 4.40
Superior 5.5 48 Natural 25 86.50 4.05

1