HTML 3.2 - Tables

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
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

*My Cats*
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

<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*
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

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
NAME BREED COLOR GENDER

Dinah shorthair brown tabby spayed female

Molly shorthair black

Ralph part Manx black and white neutered male

Shadow part Siamese sealpoint

Tigger shorthair brown tabby

Turkey Grunt part Siamese sealpoint

*My Cats*
NAME	BREED	COLOR	GENDER
Dinah	shorthair	brown tabby	spayed female
Molly	shorthair	black
Ralph	part Manx	black and white	neutered male
Shadow	part Siamese	sealpoint
Tigger	shorthair	brown tabby
Turkey Grunt	part Siamese	sealpoint

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]