8. More about Tables

You have seen the basic tags for TABLES and some of the attributes that go with them. Now we need to look at how you can combine some of these things to make more complex tables. They can make your HTML pages look very sophisticated.

Before that, let's look at another attribute. It is an attribute of the <TABLE>, <TR>, and <TD> tags. It is called the BGCOLOR (Background Color) attribute, which if in the <TABLE> puts a color in the background of every cell. If it is in the <TR> tag, it puts a color in the background of all the cells in that row, and if it is in the <TD> tag it puts the color only in the background of that particular cell. You should have already seen this if you looked at the code of the "multiplication table" in the exercises in the last lesson.

The syntax for each tag is the same.

The 6 "x"s stand for the hexadecimal numbers of the individual colors. Those are hard to come by, and as you can guess there are thousands. You need a program with a "color wheel" that will give you the numbers. The basic 16 are seen below, and the 140 curently "official" colors can be found in the RESOURCES part of the "Table of Contents" menu. For quick reference, here they are:

To show you the "override" property from TABLE to ROW to CELL, here is a three row table Illustrating it.

The table has a background color of "Aqua" but it is overridden in rows 1 and 2, but not in 3. Row 1 has a background color of "Fuchsia," and Row 2 a background color of "Lime." In Row 1 cell 2 has a background color of "Maroon," and the BGCOLOR of cell 3 is "Olive." The are no color attributes in the cells in either Row 2 or Row 3, but the "Lime" BRCOLOR in Row 2 overrides the "Aqua" in the <TABLE> tag.

Here is the code:

Look below and you will see a table. This is a very complex table. We have talked about most everything it takes to make it (except one), but for now, just look through the table and notice the things you can do. It sort of looks like one of those things you hang on the wall that has boxes you can put knick knacks in. You can always look at the code, but, there is actually a link in the exercises where you can see it written out for you and highlighted later. As With all things, I will explain all. Just like Clarissa.

The University of Redlands Table

In the center cell, you see the University of Redlands Library.		It is named after former President George Armacsot and his wife Verda..
Here is a link to the University's "Official" Web Page		Here is a link to the University's Campus Web Site
James Appleton is the President of the University, Phil Glotzbach is the Vice President for Academic Affairs, Mary Boyce is the Dean of Alfred North Whitehead College, and Nancy Carrick is the Acting Dean of the College of Arts and Sciences
For Information you can call the University at 909-793-2121; email the Admissions Office at admissions@jasper.uor.edu; or mail us at the address in the next cell.		University of Redlands 1200 East Colton Avenue Post Office Box 3080 Redlands, California 92373
The University Chapel	We invite you to visit the campus. For information on visiting the campus see the web page at: http://www.redlands.edu/admit/ADMIT.HTM.
	Especially don't miss the fantastic Fletcher Jones Academic Computer Center on the Garden Level of the Armacost Library.

Putting a table within a table

You may put anything in a cell in a table that you can put elsewhere in an HTML file, so why not a table. You need to be careful that you put in everything in that tabale that belongs to it. The code gets looking complicated, and often things get forgotten. Since it will be within a <DT> . . .</DT> tag, it is wise to put lots of space between those two, so you can put your table in without getting its parts mixed in with those of the main table.

Here is an example. The big table has a 1 pixel border and the small one a five pixel border.

Here is the HTML code for this table:

Using a TABLE and its "attributes" to format text on the page

In previous lessons we have looked at the problems with formatting text on the page, particularly lining it up around graphics. I hope you have noticed that tables help greatly with that latter problem. All you need to do is put the graphic and text in different cells.

Now the question becomes, "How do you do something like an outline on an HTML page?" Well, you could do it with "lists" inside of "lists" inside of "lists." You could probably make enormous use of the SPACE special character, "&nbsp;," or you might want to use the <PRE> tag for PREFORMATTED TEXT. In the last two possibilities case, you would be doing an enormous amount of "putting in spaces" in in one form or another.

You can use a table with no border to define pseudo TABS across a page. What you do is write a table with a FIXED WIDTH and then use FIXED WIDTHS and a HEIGHT=1 in each of the <TD> tags in the first row..

What do I mean? Well look at this code.

If we put in another row, you can see where the "tabs" are.

By using the COLSPAN attribute to let text go to the right margin, you get a major indentation. The following table is based on this "tabbing" set. The border is shown in the first illustration so you can "see" how the text is organized in the table.

Set the border to 0 and it looks just like a page with text on it.

Exercises 8

1. Make a grid on a piece of paper and put in what you think are all the attributes of TR and TD that are used to make the table at the top of this lesson. Also put in what you recognize as formatting on the text and graphics you see in each cell. Once you are finished, use the link below to match up your anwers with the real code.

2. Consider the following outline: (No responsibility is taken for opinions expressed! ;-)

Create tabs using a table and format the outline in the table as it is here in Preformatted text.

Wars of the United States from Colonial Times to the Turn of the 20th Century

I.  French and Indian War
           A.  Took place in the west of the colonies
           B.  Engaged George Washington as a surveyor
           C.  George III was the English king at the time
II.  Revolutionary War
           A.  Began at Lexington and Concord in the Mass. Colony
                     1.  The Adams family was heavily involved
                     2.  Gave rise to Longfellows "Paul Reveres Ride"
           B.  Brought the colonies together for the first time
           C.  George Washington was hired as chief general
                     1.  May battles were lost
                     2.  Troops spent one winter at Valley Forge and almost froze
                     3.  War ended with the defeat of General Cornwallis at Yorktown
III.  War of 1812
           A.   Was really an extension of a war in Europe
           B.    Was begun in the US more for political motives than anything else
           C.    Was concluded when Andrew Jackson won a major battle
                     1.  The battle was the Battle of New Orleans
                     2.  The battle was fought after the war was officially over
                             a.  Poor communications prevented knowledge of the end of the war
                             b.  Jackson and the English wanted to fight
IV.  Civil War
           A.  Some say it was fought over slavery
           B.  Others thought it was to preserve the union
           C.  Many generals were used by the North
           D.  The South had one main general, Robert E. Lee
           E.  War concluded with the battle between Grant and Lee at Appomattox
V.  Mexican War
           A.  A very politically motivated war
                     1.  Us wanted the west, which belonged to Mexico
                     2. False rumors were used to inflame the populace
           B.  Deciding Battle won by Zachary Taylor in Mexico
           C.  US annexed the west
VI. Spanish-American War
           A. Begun mostly by newspaper editors
           B. Key starting point was the sinking of the Maine in Havana harbor
                      1.  Many lives were lost
                      2.  Current evidence indicates the explosion was from the interior of the ship
           C.  The thing was a farce
                      1.  Soldiers sent to Cuba with winter fighting uniforms
                      2.  Teddy Roosevelt rode his charge us San Juan Hill to the Whitehouse
                      3.  US took Cuba, Phillipines, and most other Spanish owned territory we wanted