We discussed in an earlier lesson how important it is not to try to force a precise page layout on the browser. By the same token, though, there are times when the nature of your content means you need to have at least a little control. A prime example of this is when you are presenting information that is organized into rows and columns, like a spreadsheet or grid.

The HTML standard provides a whole group of tags for managing tables, and this lesson will introduce you to some of the things you can do with them.

Structure of a Table

At its most basic level, a table is made up of one or more rows, each of which contains one or more data "cells." In HTML, you define the table itself, then define each row in turn, and within the row define the cells. These are done as nested tags (remember the basic concepts page where we talked about nesting?), and a little care is needed to ensure that the nesting is correct. Otherwise your table will look very strange, or will not be visible at all in some browsers.

The <table>...</table> tag set defines the table itself. Rows are defined by the <tr>...</tr> (table row) tag set, and data cells (table data) are defined by the <td>...</td> tag set. There is also a table header tag set, <th>...</th> which is exactly like the table data tag except that the text inside is emphasized (for a heading, of course).

Here is a simple example of a table with no special attributes:

The HTML code to create this table looks like this:

<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>item number three</td>
  </tr>
  <tr>
    <td>four</td>
    <td>five</td>
    <td>six</td>
    </tr>
</table>

Now, if you view the source code for this page, the example table has some extra attributes not shown here. But the HTML shown above will create essentially the same table. As you can see, if you only need a simple table, you can create it quite easily with some simple HTML code.

To use this very simple table, though, you have to have the same number of columns in every row, and the same number of rows in every column. Have no fear -- there are ways around that if needed, though that is a more advanced topic.

Tables are very "smart" tags in most browsers. If you do not specify anything at all, the browser will usually do a pretty good job of laying out the table in a readable way. Notice how the above example is still readable even though the upper-left cell is kind of strange? This returns to the philosophy, stated earlier, of letting the browser do as much of the work as possible. Take control of layout only when you really need to. Nowhere in web design is this more important than in use of tables!

What's In A Table?

One of the best things about tables is that they can contain just about anything, including images, hyperlinked text, paragraphs, headings, lists, and even other tables. Here is a more complex example showing some of this versatility:

<table border=1>
  <tr>
    <td><img src="/images/FourthCornerBannerShadowedSmall.gif" alt="Fourth Corner Systems"></td>
    <td>two</td>
    <td>item number three</td>
  </tr>
  <tr>
    <td>four</td>
    <td>five</td>
    <td>
      <ol>
      <li>first thing</li>
      <li>second thing</li>
      <li>third thing, with a
      <a href="http://www.4th.com">hyperlink to 4th.com</a></li>
      </ol>
    </td>
  </tr>
</table>

In this example, the upper-left cell has an image inside, and the lower-left cell actually has an ordered list with three items in it. Here is the way that looks on the page:

	two	item number three
four	five	first thing second thing third thing, with a hyperlink to 4th.com

If you have a graphical user interface, try resizing your browser window. If you try hard enough, you can make this table look pretty strange. But notice how, for most realistic browser window sizes, it is at least readable to some degree. Your browser is doing a lot of work behind the scenes to make this happen for you.

This last example is fairly similar to the way the masthead is done at the top of each of these lesson pages. Feel free to ask your browser to show you the source for a lesson page (the intro page might be a good choice) to see how it was created.

You can do quite a lot with what's been covered here. But wait! There's more!