Tables

Structuring the Table

First let's look at basic table structure.

Here is code for a table with two rows and two columns.

<table>
 <tr>
  <td>The quick brown fox jumped over the lazy dog.
  <td>Then he jumped back.
 <tr>
  <td>Two brown fleas jumped off the dog,
  <td>and onto the fox.
</table>

The quick brown fox jumped over the lazy dog. Then he jumped back.
Two brown fleas jumped off the dog, and onto the fox.

The table is barely recognizable as a table. The reader is quite likely to skip over it.

Making Tables Stand Out to be Read
Using Attributes of the Table Tag

Attributes of the Table Tag
AttributePurposeValues
borderThickness of border in pixels Set equal to 0,1,2,3,4,5,...
width Width of tableSet as a % of the page width.
align Alignment of table with respect to surrounding text.Set equal to center, left, or right.
cellpadding Spacing between text in data cells and cell edges in pixels. Set equal to 0,1,2,3,4,5...
cellspacing Spacing between cells in pixels. Set equal to 0,1,2,3,4,5...

Suppose we take the same table, and apply the table attributes. Let's give it a border, change the width, and align it in the center of the page.

The quick brown fox jumped over the lazy dog. Then he jumped back.
Two brown fleas jumped off the dog, and onto the fox.

The table would benefit by some cellpadding, which increases the spacing between the text and the lines. We'll also add some cellspacing, which increases the space between the cells.

The quick brown fox jumped over the lazy dog. Then he jumped back.
Two brown fleas jumped off the dog, and onto the fox.

Here is the table with a larger border and a caption.

Which was quicker, the fox or the fleas?
The quick brown fox jumped over the lazy dog. Then he jumped back.
Two brown fleas jumped off the dog, and onto the fox.

The coding that was used in the table tag for this final table is:

<table border="5" 
       width="50%" 
       align="center" 
       cellpadding="10" 
       cellspacing="5">

Unfortunately this table was formatted with old style attributes, which do not lend themselves to classes. That means that this code cannot be put into a style file to be called upon when needed. If you wish to make similar tables, you must copy this (or similar) code into each table you make.

I think that formatting tables can now be done with CSS style properties, and made into a class, which can be defined in the stylesheet. I have not yet done this.

For Neatniks -- Attributes of the td and tr tags

The td tag has the attribute width, if you wish to specify the width of individual cells, instead of letting the browser do it.

It also has attributes regulating alignment, but these are better placed in the tr tag, in order to avoid repetitious typing.

AttributePurposeValues
width Width of the cell As a % of the table width.
align Left -- right alignment of text within cells left center right (Default is left for data cells, and center for headings.)
valign Vertical alignment of text within cells. top, bottom

Caption and Headers and Other Things

There is a <th> tag for making table headers. It works similarly to the td tag, except that it is expected to center the text and make it bold. (Note that I said it is "expected" to.)

The <caption>tags enclose the caption. The caption tag has the align attribute with values of top (the default) and bottom. The caption goes after the <table> tag.

If table cells are left empty, the border will not fill in around the empty cell. Dave Raggett recommends using an &nbsp; (a non breaking space) in empty cells.

As Mr. Raggett mentioned, text visibility is determined more by the font family than by the font size. Verdana and sans serif are easy to read. Times Roman looks smaller, at the same point size.

Making cells cover more than one row or column

The <td> and <th> tags have the attributes colspan and rowspan, which can be used to make a cell span several columns or rows.

Leaving Blank Space

A table can be a canny way to leave some space blank. In the next table, I set the row height to "300". This table was inspired by W3 Schools HTML Layout page.

<table border="0" width="100%" >
 <tr  height="300" valign="top">
  <td bgcolor="ffccff" width="50%">
    Questions:
  <td bgcolor="ffffcc">
    Answers:
 </tr>
</table>
Questions: Answers: