Intro to Tables, Continued

Topics on This Page

The <th> Tag
Centering a Table
Empty Cells
Example

The <th> Tag

So far we've seen the three most-used table tags: <table> which surrounds the entire table, <tr> which surrounds each row (Table Row), and <td> which surrounds a single call (Table Data). The <th> tag (Table Heading) is an alternative to the <td> tag for defining a cell, and is used when defining a cell that contains a heading. A <th> tag is identical to <td> except that the contents default to bold and centered.

Here's an example of a table with certain cells used as headings:

<table border="4" cellspacing="0" cellpadding="8">
  <tr>
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td> $534.00 </td>
  </tr>
</table>

Centering a Table

There are several different ways to center a table. All but one is deprecated.

If you're going to use a deprecated method, you might as well use <center> since more browsers support that than any of the other methods. <div align="center"> is a close second. Using align="center" within a <table> tag is the poorest choice — even fewer browsers support that than the CSS method.

Here's an example using the <center> tag:

<center>
<table border="4" cellspacing="0" cellpadding="8">
  <tr>
    <th> Item </th>
    <th> Price </th>
  </tr>
  <tr>
    <td> Radio </td>
    <td> $14.00 </td>
  </tr>
  <tr>
    <td> Television </td>
    <td> $534.00 </td>
  </tr>
</table>
</center>

Empty Cells

At times, you are going to want to leave one or more of the cells of a table empty. It's still important to define the cell, and it's important to put something in the cell. This is important for all browsers, but it's especially important for Netscape.

Here's an example of an incorrect table in which we simply omit the <td> tag for the cell that we want to leave empty:

<table border="4" cellspacing="4" cellpadding="4">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
  </tr>
  <tr>
    <td> Cell #3 </td>
  </tr>
</table>

Notice how there's no "frame" drawn around the missing cell. This is really improper HTML code because all rows in a table should contain the same number of cells. The validator will not catch this error, however.

Now let's add a cell that doesn't contain anything:

<table border="4" cellspacing="4" cellpadding="4">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
  </tr>
  <tr>
    <td> Cell #3 </td>
    <td> </td>
  </tr>
</table>

This didn't help any! We have to actually put something into the cell. It can be something that doesn't display. Common things to use are a <br> tag or a non-breaking space (&nbsp;).

We'll modify our table to have two empty cells, and we'll put a <br> into one of them and an &nbsp; into the other:

<table border="4" cellspacing="4" cellpadding="4">
  <tr>
    <td> <br> </td>
    <td> Cell #2 </td>
  </tr>
  <tr>
    <td> Cell #3 </td>
    <td> &nbsp; </td>
  </tr>
</table>

There! Now we get the frame drawn around the empty cells.

Example

Play around with this table a bit.

This table is centered using the CSS method. Try getting rid of the div style and adding align="center" to the <div> tag. Try removing the <div> tag altogether and adding align="center" to the <table> tag.

Try changing some of the <td>...</td> to <th>...</th> and vice versa. Make sure you understand the difference.