<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 malethe 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
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 |
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
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:
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.