Now with all your individual elements at the reader, how the heck do you pull it all together? Frames or tables? Tables or frames? Let's find out, shall we?

1. Table Basics: The Technical Aspect
2. Table Design
3. Frame Basics
4. Frame Design

You might want to learn about how to create frames before you learn about how to use them. There are only three tags that are essential to create a table (for the other two, see Chapter 10 of HTML Is Your Friend). These are the <table>, <tr>, and <td> tags.
      To create tables, you must first use the <table> tag, which delimits an area of code as a table. Using the attributes of the <table> tag, you can control the shaded border, the space between the cells, and the padding (the amount of shading). These attributes, respectively, are border=, cellspacing, and cellpadding. The values for these attributes are pixels.

To create a row of data cells, use the <tr> tag. Each row you want to make is represented by a <tr> tag and its end tag. There is really only one important attribute for the <tr> tag is the bgcolor= attribute, which defines the background color for the entire row. The values are in hexadecimal.

The final tag to worry about for a table is the <td> tag. This tag defines the data cell, and in effect, a column. You see, when you create a data cell in one row, there is a space reserved for a corresponding cell in all the other rows, just like a column.
      There are a lot of attributes for the data cell tag, but we'll start off with the two more important ones for layout, rowspan= and colspan=. These two attributes allow a data cell to take up the space reserved for other data cells, ones in the rows below and ones in the cells to the right, respectively. The values for these attributes are integers, the number of rows/columns you want the cell to take over. Keep in mind, though, the cell will take over the space in a rectangular fashion. And you don't need to include the <td> tags that forms the cells that the data cell would take over.
      The next set of attributes are easier to understand. First we have the standard bgcolor= attribute, which defines the background color for an individual cell. Be warned that the color of a cell will take preference to the row's, and the row's color takes preference over the whole table's. The height= and the width= attributes obviously determine the height and width of the cell. The align= and valign= attributes set which margin the content will be aligned to, and whether the content starts are the top, middle, or bottom of the cell. The values for the align= attribute are "left, center, and right" and for the valign=, "top, middle, bottom".
      This tag, the <td> tag, is the only one in group of table tags that can contain content. The <table> and <tr> tags cannot; they can only hold other table tags. Content is a broad term that refers to any tags that would normally be in the body of the document, even other tables.

Tables, are by far, the best way in HTML to precisely control space, because of the ability for you to control the height and width of each cell. And the best part about tables is the fact that the reader doesn't have to see it in the end, because of the wonderful border= attribute. Just set it to zero, and the reader doesn't know about the scaffolding that keeps the site together.
      Tables can be used to control either the entire layout of the site, or a small part of it. And don't forget how useful tables can be to organize data. Take a look at the Quantum Physics page with the borders visible. That simple grid controls the entire, complex looking layout. Remember the presence of the grid in design; since a table is essentially a grid, then what better way to control space?
      Another application of the versatile table is the creation of pseudo-imagemaps (see Chapter 8 of HTML Is Your Friend).

Learning frames is easy. Only three easy to learn tags, the <frameset>, <frame>, and <noframe> tags (see Chapter 9 of HTML Is Your Friend).
      The <frameset> tag is similar in function to the <table> tag; it delimits an area of code as a frame. This tag replaces the <body> tag, so don't include it. There are only two attributes, rows= and cols=; these two attributes allow you to define the number of rows/columns, and their dimensions. You can only code for one, either rows or columns, not both. The values can be pixels, percentages, or an asterisk (*); the asterisk is a placeholder, which tells the browser that the row/column will take up the remaining space in the window. The number of rows/columns you want is defined by the number of dimensions you add, each dimension seperated by commas, as shown below:

In the code above, I just coded for three rows, the first column is 55 pixels high, the second is 50% of the window, and the last row takes up the remainding space. The other frame tags go in between the start and end tags. They have no end tag, so don't worry about it.

The next tag is the <frame> tag. It's function is to tell the browser what HTML file to display inside the <frame> tag's frame. You see, in frames there is no content. You prepare the content in other HTML documents, which are placed into the frames by the <frameset> tags.
      There are two main attributes you need to know to make frames functional, the src= and name= attributes. Src= is the source; you type in the path/name of the HTML file to be displayed in the frame. The name= attribute is vital for hyperlinking.
      Each <frame> tag is represented in the <frameset> tag by the dimensions. There can only be as many <frame> tags as there are dimensions in the <frameset> tag; the order matters, too. The first <frame> tag corresponds with the first dimension.

The final tag is mainly for the concern of the reader. The <noframe> tag allows you to define content for people who don't have frames-capable browsers. You place the <noframe> tag within the <frameset> tag and end-tag. Simply place the content you want non-frames capable readers to see between the <noframe> tag and end-tag, and voila! That's that. You should, nay, you must include this tag whenever you use frames, however infrequently that is.

Now it's time to see the frames in action!

Frame Design

Frames can be useful for space control. But they're not really meant for layout. Frames simply cannot offer the versatility of tables, since you're just cutting up the window, instead of using the space. Each frame acts as an independent window, which makes things difficult in terms of hyperlinks. For each hyperlink, you have to be much more specific (see Chapter 6 of HTML Is Your Friend).
       Frames are better suited to webpages that require the reader to see multiple pieces of independent information at once. These multiple pieces should be able to stand on their own; but in order to create a single, cohesive site, cutting up chunks of it may not work as well. Especially if you have a busy site, one stuffed with information, is it that wise to cut up the space into smaller pieces?
       There are some things you should never do with frames. When you have a link to a different site, always have it open up in a new window, or the existing window without frames. It's annoying, and disrespectful to the other site. You should also hide borders when possible; they're somewhat ugly.
       I'm not putting down frames. In fact, with care and thought, frames can be a powerful tool to make a more efficient site. However, frames are better suited to display multiple independent slices, rather than a layout tool. Tables are much better suited to the latter function.

You know now about tables and frames, how to use them, how to create them. It's time to go on to work on compatability issues.