We have seen simple examples of how to create tables, but there is much more that the <table> and related tags can do. In this lesson, we will explore these powerful tags in greater detail.

Optional Table Features

The <table> tag has quite a few attributes which can change how the table looks and how it behaves in the browser. Here are some of the more useful options:

<table width=size border=pixels cellpadding=pixels cellspacing=pixels align=alignment>

width indicates to the browser how much of the available display area should be taken up by this table. The size can either be a number, which is interpreted as a fixed number of screen dots (pixels) or as a percentage, which is calculated depending on the browser's actual width on the screen (and recalculated if that changes). If you want the table to always be the full width of the browser, use width="100%" here. Generally you will want to use a percentage rather than an absolute pixel number, unless the table is made up only of images and you know in advance how wide the total table needs to be to hold all its columns.

If you do not specify width, the browser will make the table as narrow as possible while still fitting in all of its columns. Note that the width is relative to the display area where the table must fit. In most cases, that means the width of the browser window, but if you have a table inside another table, then the inner table "thinks" that the cell in which it "lives" is 100% of the browser.

border is the thickness, measured in pixels, of the grid lines around the cells and around the outside of the table itself. If you specify border=0 then the table is borderless. An example of this is the masthead at the top of this page.

cellpadding tells the browser how much space (in pixels) you would like between the contents of each cell and the inner edge of the cell itself (think of the cell as a cardboard box -- the cellpadding is the nearest distance from the content of the box to the cardboard's inner surface). This number can be zero if you do not want any cell padding.

cellspacing is the distance (in pixels again) between the cells. Using our cardboard box analogy again, this is essentially the thickness of the cardboard. You can also make this number zero if you wish, to cause the cells to touch one another's edges.

In a borderless table, such as the masthead on this page, it is common to have the cellpadding be zero and the cellspacing be a larger number, perhaps 4 or 5 pixels, so that things do not run too close together. There are times when you want that to happen, though, and in these cases (such as trying to merge images to make a larger composite) you might need to make both cellspacing and cellpadding equal to zero.

align is similar to the attribute of the same name on the <img> tag, in that it controls how the table as a whole is aligned on the page. Imagine that the table as a whole is a giant graphic image; the alignment specifies its placement on the page. This attribute is not often used because, frankly, it doesn't always work as one might expect.

Here is a slightly more sophisticated version of our first table:

The HTML code to create this table looks like this:

<table width="50%" cellspacing=2 cellpadding=1 border=5 align="center">
  <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>

I don't know about your browser, but in some the align="center" attribute has no effect at all. Knowing a little more about the <table> tag itself, let's now move on to learn more about the data within the table.