Tables

Tables are useful for arranging data (text, images, links, other tables, etc...) into rows and columns of cells.

Basic Tables

To create the most basic table you'll need:

TABLE tag.
BORDER attribute (of the TABLE tag) defines the width of the border (number of pixels). If it is set to 0 then the border is "turned off".
TR tag defines a table row.
TH tag defines a table heading.
TD tag defines a table datum.

Here is a simple 3 row x 3 column table:

Fruit	Cost (lb.)	Amount (lbs)
apples	$1.89	1
bananas	$.99	2

<table border=1>
  <tr>
    <th>Fruit</th><th>Cost (lb.)</th><th>Amount(lbs)</th>
  </tr>
  <tr>
    <td>apples</td><td>$1.89</td><td>1</td>
  </tr>
  <tr>
    <td>bananas</td><td>$.99</td><td>2</td>
  </tr>
</table>

And here is another basic table (having only one cell and one row and column!):

You can put a border around anything!

<table border=10>
    <tr><td> 
          You can put a border around anything!
     </td></tr>
</table>

No matter how complex the table is (or isn't!), it is very important to organize the code carefully by indenting clearly and nesting tags properly.

More Complex Tables

To make more interesting tables:

The CAPTION tag provides a short description of the table's purpose. This text appears at the top of the table.
The SUMMARY attribute (of the TABLE tag) provides a longer description. Reminiscent of the ALT tag, it is used by screen-readers and is not visible on the page.
The COLSPAN and ROWSPAN attributes of TD and TH allow cells to span several rows or columns.

Here is our simple table from earlier using these new features:

Fruits
Fruit	Cost (lb.)	Amount (lbs)
apples	$1.89	1
bananas	$.99	2
oranges	Not available

<table border=1 summary="This table charts the cost and amount of different fruits.">
<caption>Fruits</caption>
  <tr>
    <th>Fruit</th><th>Cost (lb.)</th><th>Amount (lbs)</th>
  </tr>
  <tr>
    <td>apples</td><td>$1.89</td><td>1</td>
  </tr>
  <tr>
    <td>bananas</td><td>$.99</td><td>2</td>
  </tr>
  <tr>    
    <td>oranges </td><td colspan=2><em> Not available</em> </td>
  </tr>
  </table>

Alignment and Color

Additional attributes control:

CELLSPACING
CELLPADDING
WIDTH
HEIGHT
BGCOLOR for the table, row, or cell color. (But use CSS instead.)
alignment - ALIGN for horizontal alignment (left, center, right, justify) and VALIGN for vertical alignment (top, middle, bottom).

controllable measures of a table

Adding some of these to our table (where CELLSPACING=10 CELLPADDING=20):

Fruits
Fruit	Cost (lb.)	Amount (lbs)
apples	$1.89	1
bananas	$.99	2
oranges	Not available

Exercise 1

Using TextWrangler, write an html file to produce this table. Note that you will need to make local copies of the images sidecs110.gif and gdome.gif on your desktop.

Centering a Table

One way to center a table is to use the align="center" attribute, but not all browsers do that correctly. To center using CSS (preferred in this class), you could use one of the techniques described in this web page on centering a table with CSS. The following example uses method 2.

Here is a bunch of text that is put in a table with a width of 40% consisting of two cells. The table as a whole is centered.

Here is another chunk of text. There's nothing interesting to read here, really.

Using Tables for Image Collages and Imagemaps

One interesting use of tables is for image collages and imagemaps. The idea is to create a table with pieces of an image that, as a puzzle, compose the overall image. Now each table element could be hyperlinked to the relevant page.

An extra benefit of using a table to compose an image is that pieces of the overall picture can be animated independently. See for example the Recycled, Re-Seen introduction that is made of a matrix of only three animated components (One, Two, Three). The underlying table structure looks like this.

Solutions to Exercises

Exercise 1 (view the source)

Optional reading: Meyers Chapters 12-13, Williams p.234-235..

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Tuesday, 12-Feb-2008 16:24:12 EST