The TABLE element defines a container for a table definition. A table consists of an
optional CAPTION, followed by rows (<TR>...</TR>) containing data or header
cells (TH/TD).
TABLEs can be aligned left, right, or center. Text wraps around tables with
ALIGN=LEFT and RIGHT. A simple table looks like this:
| Date |
Desc. |
Cost |
| 12-15-96 |
Hoodwink |
5.95 |
| 12-16-96 |
Bushwack |
7.50 |
Netscape and Internet Explorer allow the BGCOLOR
and background attributes for table cells, which allows the background
color or picture of individual cells to be set, just like in the <body> tag of an
html page (<table background="picture" bgcolor="color">)
Tables start with an optional caption followed by one or more rows. Each
row is formed by one or more cells, which are differentiated into header and data cells.
Cells can be merged across rows and columns, and include attributes assisting rendering to
speech and braille, or for exporting table data into databases. The model provides limited
support for control over appearence, for example horizontal and vertical alignment of cell
contents, border styles and cell margins. You can further affect this by grouping rows and
columns together. Tables can contain a wide range of content, such as headers, lists,
paragraphs, forms, figures, preformatted text and even nested tables.
The CAPTION element
The CAPTION element contains the table's caption or title. It is normally used to label
tables or figures. Netscape 3.0 and Explorer 4.0 allow any body tags (like H2), while all
other browsers allow only text (no tags). It should immediately follow the TABLE element.
The ALIGN attribute can be set to TOP (the default) and BOTTOM. It is always centered
horizontally in relation to the table width. Ex:
<TABLE>
<CAPTION ALIGN=BOTTOM>Table with a correct caption, placed under the table, defaults
to center</CAPTION>
ALIGNment of TABLEs
The alignment of cell contents can be specified on a cell by cell basis, or inherited
from enclosing elements, such as the row, column or the table element itself. The ALIGN
attribute in the HTML 3.2 draft can be left, center, or right. The default is center. Text
can flow around a table (similar to the FIG tag) when left or right aligned.
NHTML 3.0 and HTML 3.2 differ in how they center a table. NHTML uses a tag, while HTML
3.2 properly uses an attribute to the TABLE tag. There are now two ways to center a table
in NHTML 3.0: by using the <CENTER> tag or the ALIGN=CENTER attribute to the new
HTML 3.0 <DIV> tag. The HTML 3.2 way is to use the ALIGN=CENTER attribute of the
TABLE tag. (Note: Netscape 3.0 does not support the ALIGN=CENTER attribute of the TABLE
tag).
Since HTML 3.2 ignores tags it does not recognize you can do both:
<CENTER>
<TABLE>
<TR>
<TD>Centers in Netscape</TD>
<TD>Datagram</TD>
</TR>
</TABLE>
</CENTER> - DISCOURAGED, but now legal in HTML 3.2
<CENTER>
<TABLE ALIGN=CENTER>
<TR>
<TD>Hey, this really works.</TD>
<TD>Data, Data, where are you Data?</TD>
</TR>
</TABLE>
</CENTER> - RIGHT (works for Netscape 1.1 and HTML 3.2)
or
<DIV ALIGN=CENTER>
<TABLE ALIGN=CENTER>
<TR>
<TD>da, da, da, dooo</TD>
<TD>Data, ohhh DATA</TD>
</TR>
</TABLE>
</DIV> - RIGHT (works for Netscape 2.0 and HTML 3.2)*
or
<TABLE ALIGN=CENTER>
<TR>
<TD>HTML 3.2-only way</TD>
<TD>Early 1997?</TD>
</TR>
</TABLE> - RIGHT (works for HTML 3.2-compliant browsers only, Netscape 4.0+ and
Explorer 4.0+)
*Recommended until Netscape supports TABLE ALIGN=CENTER. You could remove the
<DIV> tag once this occurs.
The WIDTH attribute
The WIDTH attribute sets the desired relative width of the table as a percentage of the
screen width between margins. The WIDTH attribute (percentage) is now compatible with
Netscape and Explorer (for the TABLE tag). The default width of a table is 100% of the
available page. Note that NHTML allows an absolute width (i.e., <TABLE WIDTH=465> in
pixels) which is not supported in the HTML 3.2 DTD. Example:
<TABLE WIDTH="75%">
The WIDTH attribute had been dropped from the TH and TD tags in the latest (October)
Table draft, but is now back in the HTML 3.2 specification. The suggested width in pixels
can be used for TH/TD cells. Netscape allows a relative width (i.e., <TD WIDTH=50%>)
which is not included in the HTML 3.2 DTD.
The BORDER attribute
The BORDER attribute is now compatible with Netscape and Explorer. The BORDER attribute
can be used alone as a value (i.e., <TABLE BORDER>) or as an attribute (i.e.,
<TABLE BORDER=2>) which specifies the width of the border drawn around the frame.
The default is no border.
CELLPADDING and CELLSPACING attributes
These two Netscapisms have now become part of the HTML 3.2 specification, deploy it and
they will come. The CELLPADDING controls the spacing within cells, while CELLSPACING
controls the spacing between cells. All units are in absolute pixels.
Usage
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=5> - RIGHT
<TABLE BORDER=1 FRAME=hsides RULES=cols CELLPADDING=5 CELLSPACING=5> - HTML
3.0 (expired)
The BGCOLOR Attribute
| Netscape 3.0 and Internet
Explorer 3.0 now support table cell background colors. You can specify the color of
individual cells, rows, headers, and entire tables using the BGCOLOR attribute and the TD,
TR, TH, and TABLE tags. The color values are specified identically to the BODY BGCOLOR
attribute, i.e., BGCOLOR="hex triplet or color name". Nested tables inherit
background table colors. |
Here is an example of a table that uses all the tags we've learned so
far:
<TABLE ALIGN=left BORDER=1 WIDTH=20%>
<CAPTION CENTER ALIGN=BOTTOM>Color Cells</CAPTION>
<TR>
<TD BGCOLOR="#006400">Green</TD>
</TR>
<TR>
<TD BGCOLOR="#8b0000">Red</TD>
</TR>
</TABLE>
This code will create the following table:
Table rows
The TR element is a container for a table row. The number of rows in a table is defined
by the number of TR tags. The closing </TR> tag is optional, but recommended. TR
attributes are ALIGN and VALIGN. Using <TR ALIGN=CENTER> is a quick way to center
every cell in a row.
Usage
<TABLE>
<TR ALIGN=CENTER>
Table cells
The TD tag is a container for a table data cell. Not all rows must have the same number
of data cells, the total number of columns in a table will be the number of data cells and
COLSPANS in the longest row. The TD and TH tags can contain any body content. The TD/TH
attributes are NOWRAP, ROWSPAN, COLSPAN, ALIGN, VALIGN, WIDTH (pixels), and HEIGHT
(pixels).
- NOWRAP (suppress word wrap)
- ROWSPAN=number (number of rows spanned by cell, ex: TD ROWSPAN=3)
- COLSPAN=number (number of cols spanned by cell, ex: TD COLSPAN=2)
- ALIGN (horizontal alignment in cells, ex: TD ALIGN=RIGHT)
- VALIGN (vertical alignment in cells ex: TR VALIGN=TOP)
- WIDTH=50 (suggested cell width in pixels, ex: TD WIDTH=50)
- HEIGHT=30 (suggested cell height in pixels, ex: TD HEIGHT=30)
By default, cell contents are vertically aligned at the middle of each cell. The VALIGN
attribute works the same in both HTMLs and can override this default. It can have one of
four values: TOP, MIDDLE, BOTTOM or BASELINE.
Both HTMLs support left, center and right values for the ALIGN attribute.
Both HTMLs support the COLSPAN and ROWSPAN attributes. Note that the closing
</TD></TH></TR> tags are optional in HTML 3.0, but should be included as
some browsers require them in order to render tables properly.
Example:
<TD COLSPAN=2 ALIGN=RIGHT VALIGN=TOP WIDTH=50 NOWRAP></TD>
Example Table with all Tags/Attributes
| This a sample table. |
Each square is a cell in which you
may write anything. |
You can even add tags such as
<image> and <marquee> |
| You can use a table to define exactly
where an item will be placed. |
| To place a picture... |
Just use the <image> tag: |
|
Here is the HTML code for
the table shown above:
<center>
<table border="1" cellpadding="5" cellspacing="5"
width="80%">
<caption align="top"><b>Example Table with all
Tags/Attributes</b></caption>
<tr>
<th bgcolor="gray"><strong><b>This a sample
table.</b></strong></th>
<td align="center" valign="top"><strong>Each square is a
cell in which you may write anything.</strong></td>
<td align="center" rowspan="2"><strong>You can even add
tags such as image and marquee.</strong></td></tr>
<tr><td align="center" colspan="2"><strong>You can
use a
table to define exactly where an item will be placed.</strong></td></tr>
<tr><td align="center"><strong><b>To place a
picture...</b></strong></td>
<td align="center"><strong><b>Just use the <image>
tag:</b></td>
<td align="center" bgcolor="#FFFFFF"><img
src="mailbox.gif" width="89" height="101"></td>
</tr></table></center>
Mailing List - Receive weekly website design tips right to your mailbox
FREE