Tables and Chairs

One way to organize things is to put things in an array. An array is a system of columns and lines, much like you find in a spreadsheet or database. Many of you may be familiar with programs like Excel or DBase. You can use these programs to make lists of things, organized in an array, and set aside by certain fields.

You can do the same thing in HTML by using "TABLES". Let's say you wanted to make an inventory list for a candy store, and wanted to organize it by quantity, brand name, name of candy, price. With TABLES this is easy. Here's the example of what we are making:

Brand (Manufacture) of Candy	Name of Candy	Quantity in Stock	Package Type	Price
Hershey	Special Dark	125	Each	1.00
Hershey	Kisses	210	Each	0.98
Nestle	Crunch	36	Each	1.25
Werther's	Originals	742	Bag	.32
Jone's Candy, Inc	Peanut Butter Filled Jelly Beans	102463	Each	.03

Above is an ARRAY of Columns and Rows. The shop owner seems to like to keep track of each individual jelly bean. Each Row represents a particular candy bar. For instance, The 125 Hershey's Special Dark bars for $1.00 each represents one row. Rows run from side to side. On the other hand, a column would be represented by the candy Brand column. Columns are up and down.

Let's begin by making just the first row. We do so using the command < TABLE > as follows:

< table >
< tr >

< td >

First Row, First Column Data Goes Here

< /td >

< /tr >

< /table >

That code yields something that looks like this:

First Row, First Column Data Goes Here

Seems like a lot of code just to get one box huh? I think so too, but then again, I didn't come up with the system, I just have to work within it. Believe it or not, this is the simplified code. You don't want to see the actual code - yet. Notice that there is no information about the color of the table, the thickness or color of the borders, the size of the table, or anything else. All of this info would be found in the < TABLE > commands.

There are several tags that can be contained within the < TABLE > tag. The first two you have already seen: < TR > and < TD >.

< table >
< tr >

< td >

First Row, First Column Data Goes Here

< /td >

< /tr >

< /table >

The < TR > command stands for TABLE ROW, and you can pretty much guess what it does. It defines a row within the body of the table. The < TD > command, on the other hand stands for TABLE DATA, and yup, you guessed it - it contains the data that is to be found in the table.

So what happens if we want to put 2 columns in this same row?
That's simple! We just add another Table DATA column to the Table ROW we already created!

< table >
< tr >

< td >

First Column Data Goes Here

< /td >
< td >

Second Column Data Goes Here

< /td >

< /tr >

< /table >

When we do that, we wind up with THIS result:

First Column Data Goes Here

Second Column Data Goes Here

Now we're going to throw one more monkey wrench into the works. What happens if we want 2 rows instead of 2 columns? We have to use 2 < TR > tags. Of course, the < TR > tags do no good without data inside them, so we have to put one < TD > tag inside each of the < TR > tags.

< table >

< /table >

< table >

< /table >

Now that this is beginning to look like some sort of brain teaser, or twisted mouse maze - It's really not so bad, and the results look like the table array below.

First Row Data Goes Here

Second Row Data Goes Here

So if it took all that work to make a 2 row array, and extra work for a 2 column array - what did it take to make the 30 field 5x6 array at the top of the page? I thought you'd never ask. Hang on though - you're in for a wild ride!

<table width="95%" border="1" cellspacing="0" cellpadding="4" bgcolor="#ffffdd" > <tr>  <td > <b> Brand (Manufacture) of Candy </b> </td>  <td > <b> Name of Candy </b> </td>  <td > <b> Quantity in Stock </b> </td>  <td > <b> Package Type </b> </td>  <td > <b> Price </b> </td> </tr> <tr>  <td > <b> Hershey </b> </td>  <td > Special Dark </td>  <td > 125 </td>  <td > Each </td>  <td > 1.00 </td> </tr> <tr>  <td > <b> Hershey </b> </td>  <td > Kisses </td>  <td > 210 </td>  <td > Each </td>  <td > 0.98 </td> </tr> <tr>  <td > <b> Nestle <b> </td>  <td > Crunch </td>  <td > 36 </td> <td > Each </td>  <td > 1.25 </td> </tr> <tr>  <td > <b> Werther's </b> </td>  <td > Originals </td>  <td > 742 </td> <! - Package 4 -> <td > Bag </td>  <td > .32 </td> </tr> <tr>  <td > <b> Jone's Candy, Inc </b> </td>  <td > Peanut Butter Filled Jelly Beans </td>  <td > 102463 </td> <! - Package 5 - > <td > Each </td> <!-- Price 5 -> <td > .03 </td> </tr> </table>

You will not be expected to remember this!

I'm certain that there are better ways to accomplish the same thing. One of my favorites is to make an excel spreadsheet, do a screen capture of it, and paste the screen capture in paint. Save it as a gif file, and Viola! you have a table. But you aren't taking this course to learn how to cheat the system. You are taking it to learn HTML code, and - well - this is part of it!

On The Following Indicator... ( GREEN will indicate your current location)
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24

[ COURSE INDEX ] [ HTML GLOSSARY ] [ HOME ]

Otherwise - please click to visit an advertiser so they know you saw their ad!

This Course was written by Ray Dall © All Rights Reserved.
This page and all its content Copyright, Trademarks, Intellectual Properties
and other legal issues 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006 Ray Dall.
All Rights Reserved.
And for what it's worth... this page was last updated HexDate 01-11--7D1

VISITORS: