Tables

In earlier versions of HTML there was no way to produce a nice table. If you required the text to be formatted in a particular way, you had to put the text between the tags <PRE> and </PRE> (preformatted). For instance, to get the table
NAME             BREED            COLOR               GENDER
Dinah            shorthair        brown tabby         spayed female
Molly            shorthair        black               spayed female
Ralph            part Manx        black and white     neutered male
Shadow           part Siamese     sealpoint           neutered male
Tigger           shorthair        brown tabby         neutered male
Turkey Grunt     part Siamese     sealpoint           neutered male
the source code would look like
<PRE>
NAME             BREED            COLOR               GENDER
Dinah            shorthair        brown tabby         spayed female
Molly            shorthair        black               spayed female
Ralph            part Manx        black and white     neutered male
Shadow           part Siamese     sealpoint           neutered male
Tigger           shorthair        brown tabby         neutered male
Turkey Grunt     part Siamese     sealpoint           neutered male
</PRE>
The text between the tags will appear exactly as typed. Fortunately, the newest HTML standard provides facilities for constructing tables without resorting to <PRE>. For instance, the source code for the table

My Cats
NAMEBREEDCOLORGENDER
Dinahshorthairbrown tabby spayed female
Mollyshorthairblack spayed female
Ralphpart Manxblack and white neutered male
Shadowpart Siamesesealpoint neutered male
Tiggershorthairbrown tabby neutered male
Turkey Gruntpart Siamesesealpoint neutered male

is

<P>
<TABLE>
<CAPTION><EM>My Cats</EM></CAPTION>
<TR><TH>NAME</TH><TH>BREED</TH><TH>COLOR</TH><TH>GENDER</TH></TR>
<TR><TD>Dinah</TD><TD>shorthair</TD><TD>brown tabby</TD>
<TD>spayed female</TD></TR>
<TR><TD>Molly</TD><TD>shorthair</TD><TD>black</TD>
<TD>spayed female</TD></TR>
<TR><TD>Ralph</TD><TD>part Manx</TD><TD>black and white</TD>
<TD>neutered male</TD></TR>
<TR><TD>Shadow</TD><TD>part Siamese</TD><TD>sealpoint</TD>
<TD>neutered male</TD></TR>
<TR><TD>Tigger</TD><TD>shorthair</TD><TD>brown tabby</TD>
<TD>neutered male</TD></TR>
<TR><TD>Turkey Grunt</TD><TD>part Siamese</TD><TD>sealpoint</TD>
<TD>neutered male</TD></TR>
</TABLE>
<P>
The table is surrounded by the tags <TABLE> and </TABLE>. The caption is optional and if present, is surrounded by the tags <CAPTION> and </CAPTION>. Each row of the table is preceded by the tag <TR> (table row) and ends with </TR>. If the table is to have column headings, then each heading is enclosed in the tags <TH> and </TH>. It is not necessary to have table headings if they are not needed. Finally, each item in a row is enclosed in the tags <TD> (table data) and </TD>.

If we had wanted a small border around the table, then the opening tag would have been <TABLE BORDER="1"> and the result would be

My Cats
NAMEBREEDCOLORGENDER
Dinahshorthairbrown tabby spayed female
Mollyshorthairblack spayed female
Ralphpart Manxblack and white neutered male
Shadowpart Siamesesealpoint neutered male
Tiggershorthairbrown tabby neutered male
Turkey Gruntpart Siamesesealpoint neutered male

A wider border can be drawn by making the BORDER attribute equal to a larger number.

There are a host of other attributes that can be used in tables. These attributes can be used to control spacing in and between the individual cells, the size of cells, and the alignment of cell contents (left-justified, centered, right-justified, top, middle, and bottom). Consider the following example:

My Cats
NAMEBREEDCOLORGENDER
Dinahshorthairbrown tabby spayed female
Mollyshorthairblack
Ralphpart Manxblack and white neutered male
Shadowpart Siamesesealpoint
Tiggershorthairbrown tabby
Turkey Gruntpart Siamesesealpoint

The source code for this table is

<P>
<TABLE WIDTH="100%">
<CAPTION><EM>My Cats</EM></CAPTION>
<TR ALIGN="LEFT"><TH>NAME</TH><TH>BREED</TH><TH>COLOR</TH><TH>GENDER</TH></TR>
<TR VALIGN="TOP"><TD>Dinah</TD><TD>shorthair</TD><TD>brown tabby</TD>
<TD ROWSPAN="2">spayed female</TD></TR>
<TR><TD>Molly</TD><TD>shorthair</TD><TD>black</TD></TR>
<TR VALIGN="TOP"><TD>Ralph</TD><TD>part Manx</TD><TD>black and white</TD>
<TD ROWSPAN="4">neutered male</TD></TR>
<TR><TD>Shadow</TD><TD>part Siamese</TD><TD>sealpoint</TD></TR>
<TR><TD>Tigger</TD><TD>shorthair</TD><TD>brown tabby</TD></TR>
<TR><TD>Turkey Grunt</TD><TD>part Siamese</TD><TD>sealpoint</TD></TR>
</TABLE>
<P>
The attribute WIDTH="100%" was added in the opening TABLE tag. The result is to force the table to spread itself over the width of the browser window which in turn makes the table easier to read. Headings are centered by default. The <TR ALIGN="LEFT"> tag changes the headings so that they are flush-left. The tag <TR VALIGN="TOP"> forces the vertical alignment to the top of the cell. Finally, the <TD ROWSPAN="2"> and <TD ROWSPAN="4"> tags cause the information in these cells to be spread over two and four rows respectively.

The current vogue is to use tables to control layout of a page. This can be a dangerous practice. If the browser cannot interpret the <TABLE> tags properly, then the resulting output can become an unreadable mess. Special browsers, such as those used by the visually-impaired, often have difficulty reading tables. Plus, large tables add to the download time of a page. This is because the entire table must be downloaded and formatted before the browser can show the page.


[HTML Tutorial Home Page] [Previous Page] [Next Page]
Obliquity Valid HTML 3.2! Copyright © 1995-2007 by David Harper and L.M. Stockman
All Rights Reserved
Designed and maintained by Obliquity
Last modified on 1 January 2007
http://www.obliquity.com/computer/html/tables.html