<TABLE
ALIGN="LEFT|RIGHT"
BGCOLOR="
color
"
BORDER="
value
"
CELLPADDING="
value
"
CELLSPACING="
value
"
HEIGHT="
height
"
WIDTH="
width
"
COLS="
numOfCols
"
HSPACE="
horizMargin
"
VSPACE="
vertMargin
"
>
...
</TABLE>
ALIGN
specifies the horizontal placement of the table.
- LEFT aligns the table on the left (the default). The content following the table flows to the right of the table.
- RIGHT aligns the table on the right. The content following the table flows to the left of the table.
- CENTER aligns the table in the center. Content does not flow on either side. Navigator 4.0
BGCOLOR="color"
sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in the TH, TR, or TD tags. See Color Units for information about color values. Navigator 3.0
BORDER="value"
indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. A value of 0 means the table has no border. You can also supply the BORDER attribute without specifying a value for it to indicate that the table has a border of the default thickness.
CELLPADDING="value"
determines the amount of space, in pixels, between the border of a cell and the contents of the cell. The default is 1.
CELLSPACING="value"
determines the amount of space, in pixels, between individual cells in a table. The default is 2.
HEIGHT="height"
specifies the height of the table. The default is the optimal height determined by the contents of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.
WIDTH="width"
defines the width of the table. The default is the optimal width determined by the contents of each cell. The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.
COLS="numOfCols"
indicates how many virtual columns of equal width fit in the width of the window. Each actual column in the table occupies a virtual column. You would typically set the COLS attribute to be equal to the number of columns in the table to indicate that all the columns in the table have the same width. Navigator 3.0
HSPACE="horizMargin"
specifies the distance between the left and right edges of the table and any surrounding content.
VSPACE="vertMargin"
specifies the distance between the top and bottom edges of the table and any surrounding content.
<TABLE BORDER CELLPADDING="8" CELLSPACING="4" BGCOLOR=yellow>
<TR><TH> English </TH><TH> Spanish </TH><TH> German </TH></TR>
<TR><TD> one </TD><TD> uno </TD><TD> ein </TD></TR>
<TR><TD> two </TD><TD> dos </TD><TD> zwei </TD></TR>
<TR><TD> three </TD><TD> tres </TD><TD> drei </TD></TR>
<CAPTION ALIGN="BOTTOM"> <B>Table 1</B>: Tables are as easy as one, two, three
</CAPTION>
</TABLE>
The file tables.htm shows this example in action in a separate window.
Example 2: A More Complex Table.
The following example creates a four-column table. Each row has a different background color. The last row contains only two cells, which both span two rows, and the second cell spans three columns.
<TABLE CELLPADDING=3 CELLSPACING=6 BORDER=2>
<CAPTION ALIGN=TOP>
<BIG><BIG>Furniture Mart's Top Selling Furniture
</BIG></BIG>
</CAPTION><!-- heading row -->
<TR BGCOLOR=#CCCCFF>
<TH>NAME</TH>
<TH>SKU</TH>
<TH>PRICE</TH>
<TH>DESCRIPTION</TH>
</TR>
<!-- end of heading row --><!-- furniture rows -->
<TR BGCOLOR=#DDEEAA>
<TH>Harriet Smythe Armchair</TH>
<TD>100584</TD><TD>$2150</TD><TD>description goes here
</TD>
<TR><TR BGCOLOR=#CCFFCC>
<TH>St. Michael Sofa</TH>
<TD>100789</TD><TD>$5000</TD><TD>description goes here
</TD>
<TR><TR BGCOLOR=#BBDDFF>
<TH>Variety of prints</TH>
<TD>-</TD><TD>$100 to $5000</TD><TD>description goes here
</TD><TR>
<!-- more furniture rows go here -->
<!-- last row has cells that span rows and columns -->
<TR BGCOLOR=CYAN>
<TH ALIGN=CENTER VALIGN=MIDDLE ROWSPAN=2>
<FONT SIZE=+3>JULY SALE!!</FONT></TH>
<TD ROWSPAN=2 COLSPAN=3 ALIGN=CENTER>
<FONT SIZE=+1>
Don't miss our annual July sale.
All these prices will be slashed by 50%!!!
But on Aug 1, they go back up, so don't be late!!
</FONT>
</TD>
<TR></TABLE>
The file tables.htm shows this example in action in a separate window.
ALIGN
CAPTION
(table caption)
The CAPTION tag defines a caption for a table. Place the CAPTION tag within the TABLE tag but not inside the TD or the TR tags, which indicate table cells and table rows respectively. Navigator 1.1.
Syntax
<CAPTION ALIGN="BOTTOM"|"TOP">...</CAPTION>
specifies the placement of the caption within a table.
- BOTTOM places the caption at the bottom of the table.
- TOP places the caption at the top of the table. TOP is the default.
ALIGN
TR
(table row)
The TR tag specifies a table row. Use the TR tag inside a TABLE tag. The TR tag can contain TH tags, which indicate table headings, and TD tags, which indicate table cells.
Syntax
<TR
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"
>
...
</TR>
specifies the horizontal placement of the table:
- CENTER centers the table .
- LEFT aligns the table to the left (the default).
- RIGHT aligns the table to the right.
VALIGN
specifies the vertical placement of the content in the cell:
- BASELINE aligns the content with the cell's baseline.
- BOTTOM aligns the content with the cell's bottom.
- MIDDLE centers the content within the cell (the default).
- TOP aligns the content with the cell's top.
BGCOLOR="color"
sets the default color of the background of the table row. See Color Units for information about color values. Navigator 3.0.Table cells defined with the TD tag inside the row can set their own background color.
ALIGN
TD
(table data)
The TD tag specifies text in a cell in a table. Use the TD tag inside a TR tag inside a TABLE tag. Navigator 1.1.
You can set the background color of a cell by specifying its BGCOLOR attribute. For each cell, you can use the COLSPAN and ROWSPAN attributes to specify how many columns and rows the cell spans.
To specify the distance between cells, set the CELLSPACING attribute in the TABLE tag. To specify the distance between the borders of each cell and its contents, set the CELLPADDING attribute in the TABLE tag. All cells in a table have the same padding and spacing.
If a cell is empty, that is, the <TD> tag is immediately followed by the </TD> tag, the space occupied by the cell in the table is completely empty. That is, the cell has no content, no background color, and no border.
However, suppose you have a four column table, but you have no data for the second column in one of the rows. You should still provide the second TD tag for that row, because if you leave it out the table will close the gap and move the third cell into the second column. The row will end up having three columns only, and it will not be aligned with the rest of the table.
If you want an empty cell to look like other cells in the table, you can give it a period or a dash to indicate that the data is unknown, for example, <TD>-</TD>.
Syntax
<TD
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"
COLSPAN="value
"
ROWSPAN="value
"
HEIGHT="pixelHeight
"
WIDTH="pixelWidth
"
NOWRAP="value
"
>
...
</TD>
specifies the horizontal placement of the contents of the table cell:
- CENTER centers the content within the cell.
- LEFT aligns the content with the cell's left edge (the default).
- RIGHT aligns the content with the cell's right edge.
VALIGN
specifies the vertical placement of the contents of the cell:
- BASELINE aligns the content with the cell's baseline.
- BOTTOM aligns the content with the cell's bottom.
- MIDDLE centers the content within the cell (the default).
- TOP aligns the content with the cell's top.
BGCOLOR="color"
sets the color of the background of the table cell. See Color Units for information about color values. Navigator 1.1
COLSPAN="value"
indicates the number of columns the cell spans. Give the number as an integer.
ROWSPAN="value"
indicates the number of rows the cell spans. Give the value as an integer.
HEIGHT="pixelHeight"
specifies the suggested height of the table cell, in pixels.
WIDTH="pixelWidth"
specifies the suggested width of the table cell, in pixels.
NOWRAP
specifies that the lines within a cell cannot be broken (that is, they do not wrap onto the next line).
ALIGN
TH
(table heading)
The TH tag specifies a table cell whose contents are usually displayed in a bolder font than those of regular table cells. The intent of the TH tag is that you use it for column or row headings. Navigator 1.1
Syntax
<TH
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color
"
COLSPAN="value
"
ROWSPAN="value
"
HEIGHT="pixelHeight
"
WIDTH="pixelWidth
"
NOWRAP
>
...
</TH>
specifies the horizontal placement of the heading in the table cell:
- CENTER centers the content within the cell.
- LEFT aligns the content with the cell's left edge (the default).
- RIGHT aligns the content with the cell's right edge.
VALIGN
specifies the vertical placement of the contents of the cell:
- BASELINE aligns the content with the cell's baseline.
- BOTTOM aligns the content with the cell's bottom.
- MIDDLE centers the content within the cell (the default).
- TOP aligns the content with the cell's top.
BGCOLOR="color"
sets the color of the background of the table heading. See Color Units for information about color values. Navigator 3.0This color can be overridden by a BGCOLOR tag in the TD tags within the TH tag.
COLSPAN="value"
indicates the number of columns the cell spans.
ROWSPAN="value"
indicates the number of rows the cell spans.
HEIGHT="pixelHeight"
specifies the suggested height of the table cell, in pixels.
WIDTH="pixelWidth"
specifies the suggested width of the table cell, in pixels.
NOWRAP
specifies that the lines within a cell cannot be broken; that is, they do not wrap onto the next line.
Last Updated: 01/26/98 21:33:44