Back to Main Page

E-mail me! Click here!

The Basics of Tables

This is the first of four pages detailing one of the most important aspects of HTML, tables. Tables can be used to organize information into a sensible array, but they are most useful for creating interesting page layouts. Many people, HTML literate or otherwise, are familiar with "Frames" which can divide a page into several distinct sections. Tables are often used in place of frames for this purpose.

The First Steps

Every table will begin and end the same way; using the tags <table> and </table>. Anything that will be part of the table must appear between these tags. There are four very imortant points to remember when making tables:

1. Tables are extremely versatile tools. They can have an invisible border or a visible one of any width; they can contain virtually anything within their cells. Text, pictures, links, lists, even another table.
2. Tables with invisible borders are best used for layout purposes. This allows you to have various different layouts on different parts of a single page, and each can even have it's own background!
3. Every section of a table is its own individual bit of HTML. They can all have their own attributes, as indicated above, and this can make the HTML look VERY complex, however....
4. Don't be intimidated by the HTML involved in making tables. It only looks complicated on the surface. In reality, it is almost all patterns and repetition. Once you have used it a few times, it will make perfect sense to you.

The Basic Elements of a Table

<tr> (Table Row)
This tag indicates a new row within your table. Rows run horizontally accross your page. All other types of cells must be placed within a row. Even a table with a single cell must have one row. Always remember to end a table row with </tr>.

<td> (Data Cell)
This is the basic cell in a table. As noted above, virtually anything may be put into a data cell. Any HTML tag will function normally within a data cell. Think of it as a miniature independent section of your page, similar to a frame. Always close your data cells with the </td> tag.

<th> (Header Cell)
This a slight variant of the standard data cell. Any text in this type of cell will appear bold, and will be centered within the cell. Close this with the </th> tag.

Basic Table Setup

This will create a single cell table with an invisible border. It won't look like much of a table to the untrained eye, because you need to tell the table you want a border. If you add border="#" to the <table> tag, you will get a visible border. "1" gives you a thin border, I don't know what the maximum is, but 20-25 gives you a very sizable border, and this is likely the maximum you'll ever find a use for. In this case, the width is a number of pixels. Let's look at an example:

To illustrate the point about very wide borders, I present the following bit of evidence, with a border of "25":

Using Multiple Data Cells

To add more cells, simply repeat the <td> </td> pattern as many times as desired.

<table border="1">
<tr>
<td>Washington</td>
<td>Oregon</td>
<td>Idaho</td>
</tr>
</table>

As you can see, when you use more than one cell, vertical lines will appear to separate the cells. This is propted by multiple uses of the <td> command. The width of a given cell, and in fact the entire table, is determined by the width of whatever you put into it. How to change cell size is covered on the next page about tables.

Tables With More Than One Row

Creating another row in your table is as simple as creating a new cell. Simply close the first table row using </tr> and the start a new row with another <tr>.
Program every row of cells individualy, working your way from the left end of the row to the right.

<table border="5">
<tr>
<td>White Pine</td>
<td>Hemlock</td>
<td>Ponderosa Pine</td>
</tr>
<tr>
<td>Douglas Fir</td>
<td></td>
<td>Cedar</td>
</tr>
<tr>
<td>Sequoia</td>
<td>Lodgepole Pine</td>
<td>Blue Spruce</td>
</tr>
</table>

Notice that there are now horizontal dividers along with the vertical ones, dividing each item into a visible cell. Notice the middle cell, which has no data entered in it. The table simply forms around this gap, but you must still use the tags, or no empty cell will be created.

Using Header Cells

As mentioned before, data in a header cell will appear bold, and align itself to the center. Let's organize the above table with some headers.

<table border="5">
<th>Pine Trees</th>
<th>Spruces & Firs
</th>
<th>Other Evergreens</th>
</tr>
<tr>
<td>White Pine</td>
<td>Blue Spruce</td>
<td>Hemlock</td>
</tr>
<tr>
<td>Ponderosa Pine</td>
<td>Douglas Fir</td>
<td>Cedar</td>
</tr>
<tr>
<td>Lodgepole Pine</td>
<td></td>
<td>Sequoia</td>
</tr>
</table>

More Table Attributes

Okay. We have now created a few very basic tables, but they are anything other than perfect. The cells are odd sized and seem mismatched. The text is plain and boring; and the background is the same as the rest of the page, so the table tends to blend in, not call attention to itself as it should.

The best way to improve upon what you have already learned in this section is to use table attributes. Some of these are covered in the next section. Click here to move on.

Tables:2-3-4