HTML Tables

intro | tags | path | tables | attributes

QUICK TUTORIAL - HTML TABLES

Because HTML was not designed as a layout tool, like PageMaker or Quark, for example, but rather as a language for writing scientific papers, some method needed to be found to allow us to place information on the screen wherever we wanted it, not in straight, down-the-page fashion.

For the first five to ten years of the World Wide Web, that method has been tables. Originally meant for the display of tabular data (think spreadsheet), tables have come to be used as an ad-hoc, makeshift substitute for a true layout language. Cleverly slice your images into pieces, merge a cell or two here or there, and you can create fairly flexible layouts. You can read a bit more about merged columns and/or rows on the attributes page.

In the last several years, a better method has begun to be adopted, using Cascading Style Sheet (CSS) positioning. More on this later.

Most current web sites use tables for layout. However, you must use tables very methodically. Be sure that they are properly nested (see below), and that you close all open tags.

At the bottom of this page, I have included a common positioning hack, in case you ever find yourself needing it.

Table

<table> begins a table and </table> ends it.

See the sample table below.

Table Body, Header, Footer

ADVANCED: <tbody>, <thead>, and <tfoot> are newish tags, found in the HTML 4.0 specification. When browsers begin implementing it, you'll be able to create scrolling rows below the <thead>...</thead> tag pair and/or above the <tfoot>...</tfoot> pair. The <tbody>...</tbody> tag pair can enclose multiple rows, and there can be more than one set of <tbody> tag pairs in a table, useful if you want to use a different set of style attributes on different sections of your data. Later, when we study the W3C Document Object Model as an Application Programming Interface, it will be important to know that the tbody element is the child of the table element and the parent of the table row element.

Table Row

<tr> begins each table row and </tr> ends the row.
Hint: you can often remove an entire row, from <tr> to </tr> withouth causing too much damage. If you remove a single cell (<td>...</td>) or a single tag (e.g. <td>), you can end up with things shifted around strangely on your page.

Table header
(optional)

<th> begins a table header cell, and </th> ends it. A table header cell has bold, larger, centered text unless the style of the text is overridden by a stylesheet.

Table cell
( "table data")

<td> begins a regular table "data" cell, and </td> ends it.

Sample Table

  <tr>
    <th>Column 1
    </th>
    <th>Column 2
    </th>
  </tr>

All table tags come in pairs, and are nested. Like Russian dolls, where a small doll is inside the medium-sized doll and a medium doll is inside the big doll, table cell tags (<th>...</th> and <td>...</td>) are inside table row tags (<tr>...</tr>) and the whole thing is inside the table tag (<table>...</table>). See what it looks like at the left.

Here is what the table to the left looks like when it gets rendered by the browser:

Column 1	Column 2
Cell 1	Cell 2

Notice that what is written "down" the page within a <tr> (table row) goes "across" the page when it is displayed. It is entirely logical, but possibly confusing at first.

To get a better feeling for what table tags do, right-click somewhere on this page where there is no image, and choose "view source." You can learn a lot from what you see.

If you do not want a border, you can leave out the border="1" attribute or change it to border="0".

The single-pixel hack.

(Image appears 100x2 times larger than it actually is, and with a border so you can see it.)

Right-click and choose "Save Picture As" if you want it for your very own. It will be only 1 x 1 px, and invisible.

The single-pixel table hack was invented by people frustrated by the mid-1990's "Netscape column-collapse" problem. In the early days of Netscape, when it was the most popular browser, you could not just specify that a cell was to be, say, 100 pixels wide (as you can today with width="100"), you had to put something in the cell that was 100 pixels wide or the column would reduce itself as small as it could, collapsing to nothing if there was nothing in the cells in that column, even though you might have wanted that column to be empty on purpose.

To hold the column open, people would create a transparent gif that was 1 pixel high and 1 pixel wide (to keep the file size as small as possible), and then specify the height and width of the image inside the HTML image tag (see example to the left). Imagine this little gif as Atlas, holding up rows or holding columns apart.

Eventually, the little transparent gif, sometimes called "spacer.gif" got used all kinds of ways, but they're all workarounds of some kind or another. Until all browsers have consistent support for stylesheet positioning, the single pixel hack will be with us. It is slowly being replaced by CSS margin and padding specifications, but it's just too useful sometimes to go away completely. I now sometimes use it to create a clickable area over a background image...