Tables


Tables use a combination of several tags. Both Netscape and Mosaic correctly display these table tags (though Mosaic print-outs may be distorted) . Netscape supports tags within cells while Mosaic does not.

If you find you need to do something more complex, see Netscape's Table tutorial and Table Sampler (which has a lot of examples).

The basic table tags

<table> </table>

Tables must be enclosed in <table> </table> tags. The border attribute can be added to this tag to specify whether border lines should be drawn around each cell in the table. If you omit the border attribute, no border lines will be drawn.

The border attribute looks like: <table border>

<tr> </tr>

Each row of a table is enclosed in <tr> </tr> tags. The number of rows in the table depends on how many pairs of these tags there are. You can easily remember what this tag does by thinking "tr=table row."

<td> </td>

Each column item in a row is enclosed in <td> </td> tags. These tags define the table cell data. For example, if you have 3 items in a row, you will have 3 sets of <td> tags. Think of "td=table data," where all data is an element of a row.

<th> </th>

Each column heading is enclosed in <th> </th> tags. The text in these cells is bold and centered in the cell. Think of "th = table heading."


Examples with cellspacing and border

A simple table with rows, borders around each cell, and column headings:

Name phone email
Richard 555-6677 rmnixon@school.edu
Warren 888-3535 wzweig@school.edu
As you can see, the table is a little crowded. You can change this by adding the cellpadding= attribute to the table tag like this:

<table border cellpadding=5>

The resulting table will have table lines 5 pixels away from the data inside:

Name phone email
Richard 555-6677 rmnixon@school.edu
Warren 888-3535 wzweig@school.edu
How this table is tagged:

<table border cellpadding=5>
               
<tr>
    <th>Name</th> <th>phone</th> <th>email</th>
</tr>
<tr>
    <td>Richard</td> <td>555-6677</td> <td>rmnixon@school.edu</td>
</tr>
<tr>
    <td>Warren</td> <td>888-3535</td> <td>wzweig@school.edu</td>
</tr>
</table> 


Return to the Advanced HTML tutorial