Frames are not the only way in HTML to create complex layouts. Tables are more versatile, if more code-intensive. They can be as simple a chart, to as complex as a layout-scaffold, like the one I use to make this lovely book.

1. Table Basics
2. The <table> Tag
3. Rows: <tr>
4. Data Cells: <td>
5. Headers: <th>
6. Captions: <caption>

Tables are a great tool for dividing up an area of space into smaller sections. Think of tables as egg-cartons. There's a bunch of space, divied up into 12 smaller units.
      Tables look somewhat similar to spreadsheets. There are individual cells. Unlike spreadsheets, you can't use formulas or any other feature to modify the content in the cells. Tables simply provide a framework for layout.
      The strcuture of tables depends mainly upon two related elements: rows, and columns. In combination, these two elements -- the <tr> and <td> tags respectively -- form the data cells that house content. These two elements live on two different layers, as it were. The first layer is formed by the rows; you can't have anything without rows (on the example table, it's denoted by red). Within the row gs comes the second layer, the columns (denoted in blue). And where they intersect comes the data cell (pruple). By the way, that sample table is not a real table. It's an image. Of a table. That I really made. Check out the sourc code (save it as a text file and read it).
      As you can see from Figure 1, tables can also have captions above or beneath them. That is possible. Captions reside on a seperate layer, neither in a row or column.
      Now for the quick recap. Tables are elements that resemble spreadsheets, but posess none of the functionality. Tables' main function is layout and control of space, like a chart. The main element in a table is the data cell, which in turn requires two other elements. Thses two are rows and columns; hwere they intersect a cell is created. Rows and columns live on two different layers in the code, with the row encasing the column (you'll see how in sample co ). Other than that, tables are easy!


The <table> Tag

This is the essential tag for any table. It marks off an area of code as information for a table. Wow. Whatever goes in between the <table> tag and its respective end tag must be either table-orientated tags -- <tr>, <td>, <th&g , and <caption> -- or content.
      There are five attributes to the table tag, which control the general look of the whole table. Every data cell, unless otherwise specified, exhibits the properties of the <table> tag's attributes.
      First off we have the wonderful border= attribute. This controls the width of the border in the entire table. The border is simply the 3D border that surrounds the table and deliniates each cell. These values are in pixels, and have no limit. If you set it to "0" pixels, then the border is invisible, so you can't see that little border. Remember that the attribute of the <table> tag control the entire table and every ll of that table.
      Next is the lovely width= attribute. As you can imagine, this attribute controls how wide the table will be. The sets the width possible; if you have a 400 pixel wide table, you can put in two 200 pixel columns. Essentially, the width= attribute defines how wide the entire table is, and limits the width of all the columns combined.
      Here comes the cellspacing= property. The pixels values control how much space the content is displayed from the border. It's similar to the marginwidth= attribute of the <frame> tag. Values are again in pixels.
      Cellpadding= affects the padding, or the 3D effect, of the border. Those effects are the shadows (dark parts) which give a table that chiseled look. Values are pixels, once more.
      Finally we have bgcolor=. You've seen this enough to know it's the attribute for the background color. When you use this attribute, it affects the entire table color, including the border. Hexadecimal and name values, only.

I hope that snippet of code helps you visualize what I'm talking about. As you can see, I've coded for two rows. That's it. Right now, that's not much. Row's don't support content. Content goes into the second layer, the data cells. Think of these c ls as a combination of rows and columns. You can't have a cell without it. And you can't display content without a cell. And you always must have rows first! Otherwise, the table doesn't work.

      Now to the ever exciting world of attributes, you can be sure that the <tr> tag has plenty. We'll start with the align= attribute, which has three values, left, center, right. This attribute has no immediate effect on the row itself; it affects all the data cells in the row. This attribute controls which alignment the content will follow, left, middle, or right. It's pretty simple.
      Next we have the lovely valign= attribute. There are three values, top, middle, bottom. The "v" in this attribute stands for "vertical". Just like the previous attribute, this attribute controls the alignment for the entire row, except it's vertical this time. You can have the content start at the top of the cell, the middle, or the bottom of the cell.
      Finally, we have the familiar bgcolor= attribute. Bear in mind this affects the color of the entire row. Color values are either in hexadecimal for, or name form.

Now I've talked about the first layer of the table, the rows. Now I'll have to clarify some things about the <td> tag, which comprise the second layer.
      I've referred to the <td> tag as both columns and data cells, and you're probably confused and think that I should make up my mind. Well, the <td> tag demonstrates the properties of both. In essence, the <td> tag produces a data cell, when the tag is enclosed in a row. That is its main function. However, the <td> tag will also produce what seems like a column. That is because when you create a data cell on one yer, a corresponding cell will be produced on all the other layers. You cannot just make a cell on one row, without it affecting all the other rows in the table. Since you have to consider that the <td> tag affects other rows as well, one has to t nk of the tag as a column producer, as well. However, unlike the <tr> tag, the attributes that are placed in a <td> tag don't affect the other cells in the column. In any case, once you get familiarized and experienced wiht tables, it'll see like second nature.
      Alright, now that we've gotten that straightened out, you still have to learn about the <td> tag. This tag goes in between the start and end tag of the <tr&g;t tag. You can have as many of these things as you want in a row. Remember, the number of cells you have in one row affects the number you have in all the others, i.e., three <td>'s in row one will produce 3 cells in rows two, three, etc. I hope this little demonstration will help.

I hope that little demo helps you see the two layers. Those <td> tags go in between the <tr> tags, as I have been saying all along. In the demo (which is a fleshing-out of the first <tr> tag demo) there are two rows, the first row th two data cells, and the second row has one data cell. I have intentionally left one of those little cells blank, so you can see that a <td> tag on one row will affect the other rows. As you can see, the content in the second row's data cell doe 't take up all of the space. There's a blank area underneath the first row's second data cell that's reservered for another cell. That's what i meant by columns. Even if you don't include the corresponding <td> tag, the browser will reserve a spac above and below the cell you declared. So be careful! One additional <td> tag can completely mess up your ideal table layout.

Now onto attributes. We'll start with the newer and possibly more difficult ones that allow you much versatility. These two are rowspan= and colspan=. Both of these attributes allow a data cell to break out of its confines of a single row and a single column, and expand -- via hostile takeover -- into the surrounding rows and columns, respectively. Actually, the two attributes only allow you to expand into rows underneath the cell, and into co mns to the right of the cell. Perhaps it would be more difficult to control whichever direction the data cell would expand into it.
      Let's start with rowspan=. The values for this attribute (and colspan=) is the number of rows you would want to replace. When you use this attribute (or its companion), you do not include the corresponding <td> tag, that would appear below the cell you want to change. If you do, then the whole table is messed up. Rmemeber, do not include the number of <td> tags that the cel would expand into. You are essentially taking the space reserved for the other cells. Let's use the previous table example, and allow me to demonstrate.

When I added the rowspan=2 attribute into the second <td> of the first <tr>, that cell took up the space that was previously blank. It spanned two rows. You can span as many rows as you want. But remember, the attribute works only on rows beneath the cell that you have added the attribute to. As you see, the reverse of the code I showed you has no effect on rowspanning.

The sibling tag of the rowspan= attribute, the colspan=, attribute performs the same function, except it affects columns instead of rows. The idea is the same, except this attribute forces the cell o take up space on the cells to its right.

Now there is the same effect: it seems that the borders between the cells has disappeared. Thgis time, however, the borders that seperate cells on the same row are gone, instead of the border between cells in the same column. By using rowspan= and colspan= together, you can produce some very complex and very infomative tables, like the one below:

Survey Results
Last Name	First	Age	Phone	Hobby
Applesmith	Renee	Won't tell	Unlisted	Surfing
Brown	Arthur	38	123-4567	Golf
	Samantha	32		Won't tell
Zerop	Azerol	~1,000	none	Abducting humans
	Benzenol		222-2222

Now on to the more standard attributes of the <td> tag. We'll start off with the height= and width= attributes. As you know, this will set the height and width of the individual cell. Values e once again in pixels.
      The next pair you need to know about are the align= and valign= attributes. You know about these already. Align= sets which margin the content will be aligned to, left, center, or right. The valign= sets which vertical margin the content will start out, the top, middle, or bottom.
      The nowrap attribute is a value=less attribute which will tell the browser not to cause text wrapping in a cell. This is useful when you have a long string of text without spaces or hyphens in a small little cell, like below:

Ms. Applesmith's email:

renee_applesmith@anywhere.somewhere.com

Instead of wrapping the text, as in the cell on the left, the long email address is not forced to wrap.
      Finally, we have the familiar bgcolor= attribute. This will control the background color of the individual cell, as shown below. Note that the bgcolor= attribute closest to the cell is treated.

There you go. The bgcolor= attribute affects the data cell first, then the row, then the table. And that ends your lesson on the <td> tag.

Other than that, the <th> tag behaves exactly like the <td> tag. That is why this is the easiest tag to learn. And since it's so similar, the header tag has all the same attributes as the data cell tag, so I won't bore you with another c rt. Just look above, and substitue in <th> where you see <td>.

Captions and the <caption> Tag

Remember in the introduction to this chapter how I included a sample table? Well, if you look carefully, you will see that there is text below the table. That's the caption. You can place content (mostly text, but also lists, l ks, etc.) above or under a table, as a caption.
      To insert such a caption, you use the <caption> tag. Whatever goes between the start and end tag is displayed as a caption. This content can be text, images, lists, links, etc. There's only one attribute, align=, which has two values, top, bottom. This attribute simply allows you to place the caption above or below the table. One final note, the <caption> tag must go between the <table> tag d the first <tr> tag.

And now we conclude this chapter about tables. Tables are a great, and more versatile tool than frames. Tables can be used for simple things, such as the straightout table of information, to more complex functions, such as controlling the layout of an entire webpage, such as this book. But now it is time to add even more pizazz to your website with multimedia.