HTML TABLE Summary

• TABLE Element: Tables and Tabular Structures
• CAPTION Element: Table Caption
• COL Element: Specify Properties of a Column
• COLGROUP Element: Properties of a Collection of Columns
• THEAD Element: Table Header
• TBODY Element: Table Body
• TFOOT Element: Table Footer
• TR Element: Table Row
• TH and TD Elements: Table Header and Table Data Cells

TABLE Element: Tables and Tabular Structures

• Attributes:
  • ALIGN="left", "right", "center" (optional) Allows for floating tables, analogous to floating images as described in the IMG element section.
    • "left" floats the table to the left margin and allows subsequent text to flow to the right of the table
    • "right" floats the table to the right margin and allows subsequent text to flow to the left of the table
    • "center" should float the table to the center of the window, with text flowing around it. However, most browsers do not support this attribute value, and assume in its place the default alignment (left-aligned, with no text flow around the table). Center-aligned tables are currently possible by placing a TABLE inside a DIV element with ALIGN="center"
    • If ALIGN is absent, the table is left-aligned, and text flow around the table is not allowed.
  • BACKGROUND="#url" (optional) (Internet Explorer only) Specifies the background image to be used to tile the background of the table.
  • BGCOLOR="#rrggbb", or "color" (optional) Specifies a background color for the table. Netscape Navigator only changes the background color for the table cells. Internet Explorer also changes the color of the space between cells specified by the CELLSPACING attribute (the width of the dividing lines and border).
  • BORDER="number" (optional) Tells the browser to draw a box around each cell in the table, and a border around the entire table. If BORDER is not used, the table does not have borders. The number value is the width of the borders. Default is 1. BORDER="0" also draws a borderless table.
  • BORDERCOLOR="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the cell border. This affects the outer, chiseled border of the table (outside the border width affected by the CELLSPACING attribute), as well as the thinly chiseled lines drawn around the edge of each cell. It has no effect if there are no borders.
  • BORDERCOLORDARK="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the darker portion of the cell border. This affects the bottom and right-hand side of the outer border of the table, and the upper and left-hand sides of the thinly chiseled lines drawn around each cell. It has no effect if there are no borders.
  • BORDERCOLORLIGHT="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the lighter-colored portion of the cell border. This affects the top and left-hand side of the outer border of the table, and the bottom and right-hand borders drawn around each cell. It has no effect if there are no borders.
  • CELLPADDING="number" (optional) Specifies the horizontal and vertical space, in pixels, to leave between the edge of a table cell and the cell contents (image or text). Default value is 1.
  • CELLSPACING="number" (optional) Specifies the horizontal and vertical space, in pixels, left between individual cells in a table--this is the "width" of the dividing lines. Default value is 2.
  • HSPACE="number" (optional) (Netscape Navigator only) Specifies the horizontal padding, in pixels, to leave to the left and right of the table. This is useful for providing spacing around tables that are left- or right-aligned.
  • FRAME="void", "above", "below", "hsides", "lhs", "rhs", "vsides", "box", "border" (optional) (Internet Explorer only) Specifies which sides of the framing border should be rendered--this does not affect the borders drawn between table cells. FRAME is ignored if BORDER="0".
    • "above": Draw a border only at the top of the table frame.
    • "below": Draw a border only at the bottom of the table frame.
    • "box", "border": Draw borders on all four sides of the table frame.
    • "hsides": Draw borders only at the top and bottom of the table frame.
    • "lhs": Draw a border only at the left-hand side of the table frame.
    • "rhs": Draw a border only at the right-hand side of the table frame.
    • "void": Draw no borders for the table frame.
    • "vsides": Draw borders on the left- and right-hand sides of the table frame.
  • RULES="none", "basic", "rows". "cols", "all" (optional) (Internet Explorer only) Specifies which cell dividing lines should be drawn within the table--this does not affect the external table border.
    • "all": Draw dividing lines between all rows and all columns. This is the default. A browser may use heavier lines between groups of columns, or between THEAD, TFOOT, and TBODY.
    • "cols": Draw vertical dividing lines between all columns. A browser may use heavier lines between columns grouped within COLGROUP grouping.
    • "groups": Draw borders between all table groups--group are specified by THEAD, TBODY, TFOOT, and COLGROUP.
    • "none": Do not draw any interior dividing lines.
    • "rows": Draw horizontal dividing lines between all table rows. A browser may use heavier lines between THEAD, TFOOT, and TBODY than between regular cells.
  • VSPACE="number" (optional) (Netscape Navigator only) Specifies the vertical padding, in pixels, to leave above and below the table. This is useful for providing spacing around tables that are left- or right-aligned.
  • WIDTH="number" or "number%" (optional) Prescribes the desired width of the table, in pixels, either as percentage of the width of the display window (number%, ranging from 0% to 100%) or as an absolute width, number. Note that fixing a table to a particular pixel width may introduce formatting difficulties, should the table not fit easily within the specified size.

• Examples:
  • Example 1: TABLE with No ALIGN, No BORDER
  • Example 2: TABLE with ALIGN="left" BGCOLOR="#FFFF00" BORDER="1"
  • Example 3: TABLE with ALIGN="right" BORDERCOLOR="red" CELLPADDING="20" BORDER="5"
  • Example 4: TABLE with ALIGN="center" BORDERCOLORDARK="red" CELLSPACING="10" BORDER="5"
  • Example 5: DIV with ALIGN="center" contains TABLE with BORDERCOLORDARK="red" CELLSPACING="10" BORDER="5"
  • Example 6: TABLE with ALIGN="left" BORDERCOLORLIGHT="red" "BORDER="5" HSPACE="60" VSPACE="40"
  • Example 7: TABLE with BORDER="5" FRAME="void" WIDTH="100%"
  • Example 8: TABLE with BORDER="5" FRAME="above" WIDTH="50%"
  • Example 9: TABLE with BORDER="0" FRAME="below" WIDTH="500"
  • Example 10: TABLE with NO BORDER FRAME="below" WIDTH="50%"
  • Example 11: TABLE with FRAME="box" WIDTH="50%"
  • Example 12: TABLE with FRAME="hsides" WIDTH="50%"
  • Example 13: TABLE with BORDER="5" FRAME="hsides" WIDTH="50%"
  • Example 14: TABLE with FRAME="lhs" WIDTH="50%"
  • Example 15: TABLE with BORDER="5" FRAME="lhs" WIDTH="50%"
  • Example 16: TABLE with FRAME="rhs" WIDTH="50%"
  • Example 17: TABLE with BORDER="5" FRAME="rhs" WIDTH="50%"
  • Example 18: TABLE with FRAME="vsides" WIDTH="50%"
  • Example 19: TABLE with BORDER="5" FRAME="vsides" WIDTH="50%"
  • Example 20: TABLE with BORDER="5" RULES="none" WIDTH="50%"
  • Example 21: TABLE with RULES="all" WIDTH="50%"
  • Example 22: TABLE with BORDER="5" RULES="cols" WIDTH="50%"
  • Example 23: TABLE with RULES="rows" WIDTH="50%"
  • Example 24: TABLE with long text in a cell

• Example 1: TABLE with No ALIGN, No BORDER

Here is the text before the table.
<TABLE>
<CAPTION>Example 1: TABLE with No ALIGN, No BORDER</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Data Row 1 Col 1</TD> <TD>Data Row 1 Col 2</TD> <TD>Data Row 1 Col 3</TD>
</TR>
<TR>
    <TD>Data Row 2 Col 1</TD> <TD>Data Row 2 Col 2</TD> <TD>Data Row 2 Col 3</TD>
</TR>
</TABLE>
Here is the text after the table.

• Example 1 Output:

Here is the text before the table.

TABLE with No ALIGN, No BORDER

Header 1	Header 2	Header 3
Data Row 1 Col 1	Data Row 1 Col 2	Data Row 1 Col 3
Data Row 2 Col 1	Data Row 2 Col 2	Data Row 2 Col 3

Here is the text after the table.

• Example 2: TABLE with ALIGN="left" BGCOLOR="#FFFF00" BORDER="1"

<P> Here is the text before the table. Here is the text before the table. Here is the text before the table.
Here is the text before the table. Here is the text before the table. Here is the text before the table.
<TABLE ALIGN="left" BGCOLOR="#FFFF00" BORDER="1">
<CAPTION>Example 2: TABLE with ALIGN="left" BGCOLOR="#FFFF00" BORDER="1"</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>
Here is the text after the table. Here is the text after the table. Here is the text after the table.
Here is the text after the table. Here is the text after the table. Here is the text after the table.
<P> Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.

<BR CLEAR="all">

• Example 2 Output:

Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table.

TABLE with ALIGN="left" BGCOLOR="#FFFF00" BORDER="1"

Header 1	Header 2	Header 3
Left 1	Right 1	Center 1
Left 2	Right 2	Center 2

Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table.

Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table.

• Example 3: TABLE with ALIGN="right" BORDERCOLOR="red" CELLPADDING="20" BORDER="5"

<P> Here is the text before the table. Here is the text before the table. Here is the text before the table.
Here is the text before the table. Here is the text before the table. Here is the text before the table.
<TABLE ALIGN="right" BORDERCOLOR="red" CELLPADDING="20" BORDER="5">
<CAPTION>Example 3: TABLE with ALIGN=&quot;right&quoi; BORDERCOLOR=&quot;red&quot;
CELLPADDING=&quot;20&quot; BORDER=&quot;5&quot;</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>
Here is the text after the table. Here is the text after the table. Here is the text after the table.
Here is the text after the table. Here is the text after the table. Here is the text after the table.
<P> Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="all">

• Example 3 Output:

Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table.

TABLE with ALIGN="right" BORDERCOLOR="red" CELLPADDING="20" BORDER="5"

Header 1	Header 2	Header 3
Left 1	Right 1	Center 1
Left 2	Right 2	Center 2

Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table.

Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table.

• Example 4: TABLE with ALIGN="center" BORDERCOLORDARK="red" CELLSPACING="10" BORDER="5"

<P> Here is the text before the table. Here is the text before the table. Here is the text before the table.
Here is the text before the table. Here is the text before the table. Here is the text before the table.
<TABLE ALIGN="center" BORDERCOLORDARK="red" CELLSPACING="10" BORDER="5">
<CAPTION>TABLE with ALIGN=&quot;center&quot; BORDERCOLORDARK=&quot;red&quot;
CELLSPACING=&quot;10&quot; BORDER=&quot;5&quot;</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

Here is the text after the table. Here is the text after the table. Here is the text after the table.
Here is the text after the table. Here is the text after the table. Here is the text after the table.
<P> Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="all">

• Example 4 Output:

Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table.

TABLE with ALIGN="center" BORDERCOLORDARK="red" CELLSPACING="10" BORDER="5"

Header 1	Header 2	Header 3
Left 1	Right 1	Center 1
Left 2	Right 2	Center 2

Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table.

Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table.

• Example 5: DIV with ALIGN="center" contains TABLE with BORDERCOLORDARK="red" CELLSPACING="10" BORDER="5"

<P> Here is the text before the DIV. Here is the text before the DIV. Here is the text before the DIV.
Here is the text before the DIV. Here is the text before the DIV. Here is the text before the DIV.
<DIV ALIGN="center">
<P> Here is the text before the table. Here is the text before the table. Here is the text before the table.
Here is the text before the table. Here is the text before the table. Here is the text before the table.
<TABLE BORDERCOLORDARK="red" CELLSPACING="10" BORDER="5">
<CAPTION>DIV with ALIGN=&quot;center&quot; contains TABLE with&nbsp; BORDERCOLORDARK=&quot;red&quot;
CELLSPACING=&quot;10&quot; BORDER=&quot;5&quot;</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

Here is the text after the table. Here is the text after the table. Here is the text after the table.
Here is the text after the table. Here is the text after the table. Here is the text after the table.
<P> Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
</DIV>
<BR CLEAR="all">

• Example 5 Output:

Here is the text before the DIV. Here is the text before the DIV. Here is the text before the DIV. Here is the text before the DIV. Here is the text before the DIV. Here is the text before the DIV.

• Example 6: TABLE with ALIGN="left" BORDERCOLORLIGHT="red" "BORDER="5" HSPACE="60" VSPACE="40"

• Example 6 Output:

Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table.

TABLE with ALIGN="left" BORDERCOLORLIGHT="red" BORDER="5" HSPACE="60" VSPACE="40"

Header 1	Header 2	Header 3
Left 1	Right 1	Center 1
Left 2	Right 2	Center 2

Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table.

Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table.

• Example 7: TABLE with BORDER="5" FRAME="void" WIDTH="100%"

<TABLE BORDER="5" FRAME="void" WIDTH="100%">
<CAPTION>TABLE with BORDER=&quot;5&quot; FRAME=&quot;void&quot; WIDTH=&quot;100%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 7 Output:

• Example 8: TABLE with BORDER="5" FRAME="above" WIDTH="50%"

<TABLE FRAME="above" BORDER="5" WIDTH="50%">
<CAPTION>TABLE with BORDER=&quot;5&quot; FRAME=&quot;above&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 8 Output:

• Example 9: TABLE with BORDER="0" FRAME="below" WIDTH="500"

<TABLE BORDER="0" FRAME="below" WIDTH="500">
<CAPTION>TABLE with BORDER=&quot;0&quot; FRAME=&quot;below&quot; WIDTH=&quot;500&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 9 Output:

• Example 10: TABLE with NO BORDER FRAME="below" WIDTH="50%"

 <TABLE FRAME="below" WIDTH="50%">
<CAPTION>TABLE with NO BORDER FRAME=&quot;below&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 10 Output:

• Example 11: TABLE with FRAME="box" WIDTH="50%"

<TABLE FRAME="box" WIDTH="50%">
<CAPTION>TABLE with FRAME=&quot;box&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 11 Output:

• Example 12: TABLE with FRAME="hsides" WIDTH="50%"

<TABLE FRAME="hsides" WIDTH="50%">
<CAPTION>TABLE with FRAME=&quot;hsides&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 12 Output:

• Example 13: TABLE with BORDER="5" FRAME="hsides" WIDTH="50%"

<TABLE BORDER="5" FRAME="hsides" WIDTH="50%">
<CAPTION>TABLE with BORDER=&quot;5&quot; FRAME=&quot;hsides&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 13 Output:

• Example 14: TABLE with FRAME="lhs" WIDTH="50%"

<TABLE FRAME="lhs" WIDTH="50%">
<CAPTION>TABLE with FRAME=&quot;lhs&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 14 Output:

• Example 15: TABLE with BORDER="5" FRAME="lhs" WIDTH="50%"

<TABLE BORDER="5" FRAME="lhs" WIDTH="50%">
<CAPTION>TABLE with BORDER=&quot;5&quot; FRAME=&quot;lhs&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 15 Output:

• Example 16: TABLE with FRAME="rhs" WIDTH="50%"

<TABLE FRAME="rhs" WIDTH="50%">
<CAPTION>TABLE with FRAME=&quot;rhs&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 16 Output:

• Example 17: TABLE with BORDER="5" FRAME="rhs" WIDTH="50%"

<TABLE BORDER="5" FRAME="rhs" WIDTH="50%">
<CAPTION>TABLE with BORDER=&quot;5&quot; FRAME=&quot;rhs&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 17 Output:

• Example 18: TABLE with FRAME="vsides" WIDTH="50%"

<TABLE FRAME="vsides" WIDTH="50%">
<CAPTION>TABLE with FRAME=&quot;vsides&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 18 Output:

• Example 19: TABLE with BORDER="5" FRAME="vsides" WIDTH="50%"

<TABLE BORDER="5" FRAME="vsides" WIDTH="50%">
<CAPTION>TABLE with BORDER=&quot;5&quot; FRAME=&quot;vsides&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 19 Output:

• Example 20: TABLE with BORDER="5" RULES="none" WIDTH="50%"

<TABLE BORDER="5" RULES="none" WIDTH="50%">
<CAPTION>TABLE with BORDER=&quot;5&quot; RULES=&quot;none&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 20 Output:

• Example 21: TABLE with RULES="all" WIDTH="50%"

<TABLE RULES="all" WIDTH="50%">
<CAPTION>TABLE with RULES=&quot;all&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 21 Output:

• Example 22: TABLE with BORDER="5" RULES="cols" WIDTH="50%"

<TABLE BORDER="5" RULES="cols" WIDTH="50%">
<CAPTION>TABLE with BORDER=&quot;5&quot; RULES=&quot;cols&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 22 Output:

• Example 23: TABLE with RULES="rows" WIDTH="50%"

<TABLE RULES="rows" WIDTH="50%">
<CAPTION>TABLE with RULES=&quot;rows&quot; WIDTH=&quot;50%&quot;
</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>

• Example 23 Output:

• Example 24: TABLE with long text in a cell

• Example 24 Output:

CAPTION Element: Table Caption

• Attributes:
  • ALIGN= "top", "bottom" ("left", "right": Internet Explorer only) (optional) Specifies the desired location for the caption relative to the table.
    • "top" (the default) places the caption above the table.
    • "bottom"  places the caption below the table.
    • "left" or "right" (Internet Explorer only) places the caption on top of the table, but aligned to the left or right edge of the table.

• Examples:
  • Example 1: TABLE with No CAPTION
  • Example 2: TABLE with CAPTION ALIGN="top"
  • Example 3: TABLE with CAPTION ALIGN="bottom"
  • Example 4: TABLE with CAPTION ALIGN="right"

• Example 1: TABLE with No CAPTION

<P> Here is the text before the table.
<TABLE BORDER=1>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Data Row 1 Col 1</TD> <TD>Data Row 1 Col 2</TD> <TD>Data Row 1 Col 3</TD>
</TR>
<TR>
    <TD>Data Row 2 Col 1</TD> <TD>Data Row 2 Col 2</TD> <TD>Data Row 2 Col 3</TD>
</TR>
</TABLE>

Here is the text after the table.

• Example 1 Output:

Here is the text before the table.

Header 1	Header 2	Header 3
Data Row 1 Col 1	Data Row 1 Col 2	Data Row 1 Col 3
Data Row 2 Col 1	Data Row 2 Col 2	Data Row 2 Col 3

Here is the text after the table.

• Example 2: TABLE with CAPTION ALIGN="top"

• Example 2 Output:

• Example 3: TABLE with CAPTION ALIGN="bottom"

<TABLE BORDER=1>
<CAPTION ALIGN="bottom">TABLE with CAPTION ALIGN=&quot;bottom&quot;</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Data Row 1 Col 1</TD> <TD>Data Row 1 Col 2</TD> <TD>Data Row 1 Col 3</TD>
</TR>
<TR>
    <TD>Data Row 2 Col 1</TD> <TD>Data Row 2 Col 2</TD> <TD>Data Row 2 Col 3</TD>
</TR>
</TABLE>

• Example 3 Output:

• Example 4: TABLE with CAPTION ALIGN="right"

<TABLE BORDER=1>
<CAPTION ALIGN="right">TABLE with CAPTION ALIGN=&quot;right&quot;</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Data Row 1 Col 1</TD> <TD>Data Row 1 Col 2</TD> <TD>Data Row 1 Col 3</TD>
</TR>
<TR>
    <TD>Data Row 2 Col 1</TD> <TD>Data Row 2 Col 2</TD> <TD>Data Row 2 Col 3</TD>
</TR>
</TABLE>

• Example 4 Output:

COL Element: Specify Properties of a Column

• Attributes:
  • ALIGN= "left", "right", "center" (optional) Specifies the content should be left-, right-, or center-aligned.
  • SPAN="number" Specifies the number of columns affected by a COL element. SPAN="0" is special, and indicates that the properties should be applied to all columns from the current column up to the last column in the table.
  • WIDTH="number", "number%" Specifies the desired width of a column., using any of the values defined in the TD section. (Not currently supported).

• Examples:
  • Example 1: TABLE with multiple COLs with ALIGNs
  • Example 2: TABLE with SPAN

• Example 1: TABLE with multiple COLs with ALIGNs

<TABLE BORDER=1 WIDTH="50%">
<CAPTION> TABLE with multiple COLs</CAPTION>
<COL ALIGN="left">
<COL ALIGN="right">
<COL ALIGN="center">
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Data Row 1 Col 1</TD> <TD>Data Row 1 Col 2</TD> <TD>Data Row 1 Col 3</TD>
</TR>
<TR>
    <TD>Data Row 2 Col 1</TD> <TD>Data Row 2 Col 2</TD> <TD>Data Row 2 Col 3</TD>
</TR>
</TABLE>

• Example 1 Output:

• Example 2: TABLE with SPAN

<TABLE BORDER=1 WIDTH="100%">
<CAPTION> TABLE with SPAN</CAPTION>
<COL ALIGN="left">
<COL SPAN="3" ALIGN="right">
<COL ALIGN="center">
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH> <TH>Header 4</TH> <TH>Header 5</TH>
</TR>
<TR>
    <TD>Data Row 1 Col 1</TD> <TD>Data Row 1 Col 2</TD> <TD>Data Row 1 Col 3</TD>
    <TD>Data Row 1 Col 4</TD> <TD>Data Row 1 Col 5</TD>
</TR>
<TR>
    <TD>Data Row 2 Col 1</TD> <TD>Data Row 2 Col 2</TD> <TD>Data Row 2 Col 3</TD>
    <TD>Data Row 2 Col 4</TD> <TD>Data Row 2 Col 5</TD>
</TR>
</TABLE>

• Example 2 Output:

COLGROUP Element: Properties of a Collection of Columns

• Attributes:
  • ALIGN= "left", "right", "center" (optional) Specifies the content should be left-, right-, or center-aligned.
  • VALIGN="baseline" (Not widely supported)

• Examples:
  • Example 1: TABLE with COLGROUPs with ALIGNs

• Example 1: TABLE with multiple COLGROUPs with ALIGNs

<TABLE BORDER=1 WIDTH="100%">
<CAPTION> TABLE with multiple COLGROUPs with ALIGNs</CAPTION>
<COLGROUP ALIGN="left">
<COL>
<COL ALIGN="right">
<COL>
</COLGROUP>
<COLGROUP ALIGN="center">
<COL SPAN="2">
</COLGROUP>
<TR>
    <TH>&nbsp;</TH> <TH>Column Header 1</TH> <TH>Column Header 2</TH>
    <TH>Column Header 3</TH> <TH>Column Header 4</TH>
</TR>
<TR>
    <TH>Row Header 1</TH> <TD>Data Row 1 Col 1</TD> <TD>Data Row 1 Col 2</TD>
    <TD>Data Row 1 Col 3</TD> <TD>Data Row 1 Col 4</TD>
</TR>
<TR>
    <TH>Row Header 2</TH> <TD>Data Row 2 Col 1</TD> <TD>Data Row 2 Col 2</TD>
    <TD>Data Row 2 Col 3</TD> <TD>Data Row 2 Col 4</TD>
</TR>
</TABLE>

• Example 1 Output:

THEAD Element: Table Header

• Examples:
  • Example 1: TABLE with THEAD TBODY TFOOT

• Example 1: TABLE with THEAD TBODY TFOOT

<TABLE BORDER=1 WIDTH="100%">
<CAPTION> TABLE with THEAD TBODY TFOOT</CAPTION>
<THEAD>
<TR>
    <TH ROWSPAN="2">&nbsp;</TH> <TH ROWSPAN="2">Heading1</TH> <TH ROWSPAN="2">Heading2</TH>
    <TH COLSPAN="2">Main Heading</TH>
</TR>
<TR>
    <TH>SubHead1</TH> <TH>SubHead2</TH>
</TR>
</THEAD>
<TBODY>
<TR>
    <TH>Title1</TH> <TD>Item 1</TD> <TD>Item 2</TD>
    <TD>Item 3</TD> <TD>SubT-1</TD>
</TR>
<TR>
    <TH>Title2</TH> <TD>Item 4</TD> <TD>Item 5</TD>
    <TD>Item 6</TD> <TD>SubT-2</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
    <TH>MAIN-T</TH> <TD>MAIN-1</TD> <TD>MAINT-2</TD>
    <TD>MAIN-3</TD> <TD>SubMAIN</TD>
</TR>
</TBODY>
</TABLE>

• Example 1 Output:

TBODY Element: Table Body

• Examples:
  • See Example 1 (TABLE with THEAD TBODY TFOOT) in THEAD Element.

TFOOT Element: Table Footer

• Examples:
  • See Example 1 ( TABLE with THEAD TBODY TFOOT) in THEAD Element.

TR Element: Table Row

• Attributes:
  • ALIGN="left", "right", "center" (optional) Specifies the horizontal alignment of the cell content within every cell in the row.
    • "left" aligns the content flush left within the cell.
    • "right" aligns the content flush right within the cell.
    • "center" centers the content between the left and right cell borders.
  • BACKGROUND="#url" (optional) (Internet Explorer only) Specifies the background image to be used to tile the background of the row.
  • BGCOLOR="#rrggbb", or "color" (optional) Specifies a background color for the cell in the row.
  • BORDERCOLOR="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the cell border: the thinly chiseled lines drawn around the edge of each cell. 
  • BORDERCOLORDARK="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the darker portion of the cell border. This affects the bottom and right-hand side of the outer border of the table, and the upper and left-hand sides of the thinly chiseled lines drawn around each cell. It has no effect if there are no borders.
  • BORDERCOLORLIGHT="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the lighter-colored portion of the cell border. This affects the top and left-hand side of the outer border of the table, and the bottom and right-hand borders drawn around each cell. It has no effect if there are no borders.
  • VALIGN="top", "middle", "bottom", "baseline" (optional) Specifies the vertical alignment of the content within every cell in the row. The values "top", "middle", and "bottom" vertically align the cell content at the top, middle, or bottom of the cell, respectively, while "baseline" specifies the baseline of the cell content should be vertically aligned with the baseline of the text in adjacent cells from the same row. 

• Examples:
  • Example 1: TR

• Example 1: TR

<TABLE BORDER="5" CELLPADDING="10" CELLSPACING="5" WIDTH="100%">
<CAPTION>TR</CAPTION>
<TR BGCOLOR="#FF00FF" ALIGN="left">
    <TH COLSPAN="2">Head 1 Row 1</TH> <TH COLSPAN="2">Head 2 Row 1</TH>
</TR>
<TR BGCOLOR="#FF0000" ALIGN="right">
    <TH>Head 1 Row2 Col 1</TH> <TH>Head 1 Row 2 Col 2</TH>
    <TH>Head 2 Row2 Col 1</TH> <TH>Head 2 Row 2 Col 2</TH>
</TR>
<TR BORDERCOLOR="#00FF00" ALIGN="center">
    <TD>Header 1 Data 1</TD> <TD>Header 1 Data 2</TD>
    <TD>Header 2 Data 3</TD> <TD>Header 2 Data 4</TD>
</TR>
<TR BORDERCOLORDARK="#0000C0" VALIGN="top">
    <TD>Header 1 Data 5</TD> <TD>Header 1 Data 6</TD>
    <TD>Header 2 Data 7</TD> <TD>Header 2 Data 8</TD>
</TR>
<TR BORDERCOLORLIGHT="#00FF00" VALIGN="middle">
    <TD>Header 1 Data 9</TD> <TD>Header 1 Data 10</TD>
    <TD>Header 2 Data 11</TD> <TD>Header 2 Data 12</TD>
</TR>
<TR BORDERCOLORLIGHT="#FF0000" VALIGN="bottom">
    <TD>Header 1 Data 13</TD> <TD>Header 1 Data 17</TD>
    <TD>Header 2 Data 15</TD> <TD>Header 2 Data 16</TD>
</TR>
<TR BORDERCOLORLIGHT="#FF7F50" VALIGN="baseline">
    <TD>Header 1 Data 17</TD> <TD>Header 1 Data 18</TD>
    <TD>Header 2 Data 19</TD> <TD>Header 2 Data 20</TD>
</TR>
</TABLE>

• Example 1 Output:

TH and TD Elements: Table Header and Table Data Cells

• Attributes:
  • ALIGN="left", "right", "center" (optional) Specifies the alignment of the table cell content within the cell.
    • "left" aligns the content flush left within the cell. Default value is "left" for TD.
    • "right" aligns the content flush right within the cell.
    • "center" centers the content between the left and right cell borders. Default value is "center" for TH.
  • BACKGROUND="#url" (optional) (Internet Explorer only) Specifies the background image to be used to tile the background of the cell.
  • BGCOLOR="#rrggbb", or "color" (optional) Specifies a background color to use in the cell.
  • BORDERCOLOR="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the cell border: the thinly chiseled lines drawn around the edge of each cell. 
  • BORDERCOLORDARK="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the darker portion of the cell border. This affects the bottom and right-hand side of the outer border of the table, and the upper and left-hand sides of the thinly chiseled lines drawn around each cell. It has no effect if there are no borders.
  • BORDERCOLORLIGHT="#rrggbb", or "color" (optional) (Internet Explorer only) Specifies the desired color for the lighter-colored portion of the cell border. This affects the top and left-hand side of the outer border of the table, and the bottom and right-hand borders drawn around each cell. It has no effect if there are no borders.
  • COLSPAN="number" (optional) Specifies how many table columns are spanned by the cell. Default value is 1.
  • HEIGHT="number" (optional) Specifies the desired height for the cell, in pixels. All the cells in a row must have the same height; thus, if two cells in a row specify different heights, the larger value will be used for the entire row.
  • NOWRAP (optional) Indicates the text lines within a cell may not wrap; the browser may not use soft line breaks. You can use BR elements to force hard line breaks, where desired.
  • ROWSPAN="number" (optional) Specifies how many table rows are spanned by the cell. Default value is 1. Counting of rows is downward from the top of the table.
  • VALIGN="top", "middle", "bottom", "baseline" (optional) Specifies the vertical alignment of the content within the cell. The values "top", "middle", and "bottom" vertically align the cell content at the top, middle, or bottom of the cell, respectively, while "baseline" specifies the baseline of the cell content should be vertically aligned with the baseline of the text in adjacent cells from the same row. 
  • WIDTH="number", "number%" (optional) Specifies the desired width for the cell, either as an absolute width (in pixels), or as a percentage relative to the total table width. All the cells in a column must have the same width; thus, if two cells in a column specify different widths, the larger value will be used for the entire column.

• Examples:
  • Example 1: TH and TD
  • Example 2: 

• Example 1: TH and TD

<TABLE BORDER>
<CAPTION><B>Third Example</B></CAPTION>
<TR>
    <TH ROWSPAN="2" BGCOLOR="#C0C0C0">Head 1</TH> <TH COLSPAN="2" BGCOLOR="#808080">Head 2 Row 1</TH>
</TR>
<TR>
    <TH BORDERCOLOR="#FF0000">Head 2 Row2 Col 1</TH> <TH BORDERCOLOR="#0000FF">Head 2 Row 2 Col 2</TH>
</TR>
<TR>
    <TD BORDERCOLORDARK="#00FF00">Header 1 Data 1</TD>
<TD>Header 2 Data 2</TD> <TD>Header 2 Data 3</TD>
</TR>
<TR>
    <TD ALIGN="left" BORDERCOLORLIGHT="#0000FF">Header 1 Data 4</TD>
    <TD>Header 2 Data 5</TD> <TD>Header 2 Data 6</TD>
</TR>
<TR>
    <TD ALIGN="right" HEIGHT="200">Header 1 Data 7</TD>
    <TD>Header 2 Data 8</TD> <TD>Header 2 Data 9</TD>
</TR>
<TR>
    <TD ALIGN="center" WIDTH="300">Header 1 Data 10</TD>
    <TD>Header 2 Data 11</TD> <TD>Header 2 Data 12</TD>
</TR>
</TABLE>

• Example 1 Output:

• Example 2: Different number of columns on different TRs

<TABLE BORDER>
<CAPTION>Different number of columns on different TRs</CAPTION>
<TR BGCOLOR="#C0C0C0">
<TH ROWSPAN="2">Head 1</TH> <TD COLSPAN="2">Head 2 Row 1</TD>
</TR>
<TR BGCOLOR="#808080">
<TH>Head 2 Row2 Col 1</TH> <TH>Head 2 Row 2 Col 2</TH>
</TR>
<TR>
<TD>Header 1 Data 1</TD>
<TD>Header 2 Data 2</TD> <TD>Header 2 Data 3</TD>
<TD>Header 1 Data 4</TD>
<TD>Header 2 Data 5</TD> <TD>Header 2 Data 6</TD>
</TR>
</TABLE>

• Example 2 Output:

• Example 3:HREF programs

<TABLE BORDER>
<CAPTION>HREF programs</CAPTION>
<TR>
<TH BGCOLOR="#FFFF00"><A HREF="sounds/AppletSoundExample/train.au">train.au</A></TH>
<TH BGCOLOR="#FF00FF"><A HREF="sounds/queserasera.mid">queserasera.mid</A></TH>
<TH BGCOLOR="#FF0000"><A HREF="sounds/MozartNo40.rmi">MozartNo40.rmi</A></TH>
</TR>
</TABLE>

• Example 3 Output: