Notes 4
— print (last updated: Jun 28, 2009) — print

Select font size:

HTML Tables

HTML Tables (see HTML4.01 specs) provide a robust way of organizing information on a web page. They can be used both to construct an overall grid-style page layout as well as for presenting specific information in a tabular fashion.

Basic elements: table, tr, td, th

The most basic HTML elements needed are table, tr (table row) and td (table data). In addition, the th (table header) element is used like the td element with different default style settings. For example, this is a simple table using these basic elements. 
<table summary="">

<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td>5.31</td> <td>4.2</td> 
<td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>
hardware<br />and<br />software
</td>
</tr>

</table>
Here is how it is rendered:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

The control for table elements are in HTML-Kit's table tab. The icon on the far left is the most basic one which generates a starter table with one row and one cell. HTML-Kit more-or-less forces you to use the summary attribute.

A table consists of cells displayed horizontally between the <tr> </tr> tags. The td and th cells have the same function — the difference is their different default style features:

Table attributes

The attributes specific to the table element are these (see the HTML4.01 table specs): In order to illustrate the effects of these attributes, we'll use the table from the previous section and make changes to the start tag.

The border, cellpadding, cellspacing attributes

The border attribute is the easiest way to control the appearance of having a frame around the table. For example, modifying the start tag as follows: 
<table summary="" border="1">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
The cellpadding attribute creates space between the cell content and the surrounding cell. Making this addition: 
<table summary="" border="1" cellpadding="20px">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
The cellspacing creates space between cells. Making this addition: 
<table summary="" border="1" cellpadding="20px" cellspacing="8px">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

The cellpadding and cellspacing both have default values of 1. In many circumstances it is useful to eliminate this spacing, causing the following change in appearance (both have border="1"):
cellpadding="0"
cellspacing="0" 		cellpadding, cellspacing unspecified
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

The width attribute

The width attribute specifies the width of the table, the default unit being pixels. Making the start tag this: 
<table summary="" border="1" width="400px">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
It is also useful to set the width using the percentage unit with the suffix %. In this case the width is set to the percentage of the browser's width and, of course, varies when the browser is resized. Making the start tag this: 
<table summary="" border="1" width="100%">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

The frame and rules attributes

The frame and rules attributes allow you to specify variations on where the lines appear. The frame specifies the lines forming the external box around the table and the rules specify the internal lines. Here are some examples. 

<table summary="" border="1" frame="border" rules="none">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software 
<table summary="" border="1" frame="void" rules="all">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software 
<table summary="" border="1" frame="hsides" rules="rows">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software 
<table summary="" border="1" frame="hsides" rules="cols">
causes the table to look like this:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

Empty Cells

When you want a cell to be empty or blank and there is a border, you typically cannot simply do this: 
<td></td>       or       <td> </td>
For example, the following code: 
<table summary="" cellpadding="10px" border="1">
<tr>
<td>a</td>  <td> </td>
</tr>

<tr>
<td>c</td>  <td>d</td>
</tr>
</table>
creates this appearance:
a
c d
What you need to do is to put the special character &nbsp; (non-breaking space) in an empty cell, like this: 
<td>&nbsp;</td>
With this modification the empty cell "looks right":
a 
cd

Row and cell attributes

The tr attributes apply to all the cells within the row: (see HTML 4.01 tr specs): The td and th elements share the same attributes (see HTML4.01 td & th specs): Setting the width of an individual cell has the effect of setting the width of the entire column. Its usage is technically deprecated but it is still very common in practice.

Additionally cell and row elements support these attributes

related to providing tabular information in alternative modalities, such as speech synthesis. Using these, the user may be able to query the contents of the table to discover specific information.

We'll use our example table to illustrate some of these features.

Alignment: align and valign

Recall how the original table looks with a border and no other modifications:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
We already talked about the default horizontal alignment for the cells td ("left") and th ("center"). Observe the default vertical alignment for these cells is "center". Now suppose we make the following alignment changes to the rows: 
<table summary="" border="1">

<tr align="left">
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td>5.31</td> <td>4.2</td> 
<td>percent increase</td>
</tr>

<tr valign="top">
<td>$30,333</td> <td>$46,576</td> 
<td>
hardware<br />and<br />software
</td>
</tr>

</table>
To see the difference, compare the two side by side:

previous version

1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

modified version

1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software
The th and td alignment settings can specify alignment for individual cells and override any setting from the table row. For example, if we make one further modification to the previous table by changing one cell: 
<th align="right">type</th>
we get the following effect:
1990 2000 type
5.31 4.2 percent increase
$30,333 $46,576 hardware
and
software

Spanning multiple cells: colspan & rowspan

Setting the colspan attribute to a number > 1 allow a cell to cover more than one column. Consider our running example modified yet again: 
<table summary="" border="1">
<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td align="center" colspan="2">5.31</td> 
<td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> <td>$46,576</td> 
<td>
hardware<br />and<br />software
</td>
</tr>
</table>
creates this appearance:
1990 2000 type
5.31 percent increase
$30,333 $46,576 hardware
and
software

We are trying to convey the information that the number "5.31" applies to both years instead of repeating it. Whenever a colspan > 1 is used, we simply reduce the number of cells within a row appropriately.

Likewise, the rowspan attribute, when set to a number > 1 means that the cell covers that one in the row where it is declared and the row below it. This is a bit trickier to use, because you have to take away a cell in the next row! Here is an example: 
<table summary="" border="1">
<tr>
<th>1990</th> <th>2000</th> <th>type</th>
</tr>

<tr> 
<td>5.31</td> <td align="center" rowspan="2">?</td> 
<td>percent increase</td>
</tr>

<tr>
<td>$30,333</td> 
<td>
hardware<br />and<br />software
</td>
</tr>
</table>
creates this appearance:
1990 2000 type
5.31 ? percent increase
$30,333 hardware
and
software
We are trying to convey the information that the data for the year 2000 is completely unknown.

© Robert M. Kline