HTML Support - Tables

Table Support

Microsoft® Internet Explorer 3.0 supports HTML tables according to the HTML 3.0 table model. Details of this standard are available at http://www.w3.org/pub/WWW/TR/WD-tables.html.

Note: This link points to a server that is not under the control of Microsoft Corporation. Please read our disclaimer before continuing.
Example Table
Hello

there!

Example Table
Hello
there!

As shown here, Internet Explorer 3.0 extends the table specification with color. By adding BGCOLOR=#nnnnnn to each opening TD tag, each individual cell can have its own background color. You can also add a caption to the table by using the CAPTION tag.

Here is the HTML entry that produces the table shown at right:

<TABLE ALIGN=RIGHT BORDER=1 WIDTH=20%>
<CAPTION ALIGN=CENTER VALIGN=BOTTOM><FONT FACE="COURIER NEW" SIZE=1>Example Table</FONT></CAPTION>
<TR><TD BGCOLOR=#FFFFBB>Hello</TD></TR>
<TR><TD BGCOLOR=#CCECFF>there!</TD></TR>
</TABLE>

The following attributes remain with the lowest-level component if they are nested. For example, TH and TD attributes override TR and TABLE attributes, and TR attributes override TABLE attributes. For more information about TABLE, TR, TH, and TD, please see the HTML 3.0 standard mentioned above.

Be sure to check out our cool Tables demo page to find out how to create the most interesting pages using background images with Tables.

TABLE - HTML 3 (Draft Standard)

Here is a complete description of the additional attributes supported by TABLE, TR, TH, and TD.

Attribute Explanation Example Support

ALIGN=LEFT, or RIGHT Specifies that the table or the text can be left- or right-aligned. The default is left-aligned for TABLE, TR, and TD. The default is center-aligned for TH. <TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD>This table is right-aligned.</TD></TR></TABLE>

<TABLE BORDER=1 width=20%> <TR><TD ALIGN=RIGHT>The text in this cell is right-aligned.</TD></TR></TABLE> IExplore

BACKGROUND=" URL" Specifies a background picture. The picture is tiled behind the text and graphics in the table, table head, or table cell. <TABLE BACKGROUND="linoleum.gif"> … </TABLE> IExplore

BGCOLOR= #rrggbb or colorname Sets background color. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BGCOLOR and each of the other color attributes here can also be set to a colorname. See Using Color. <TABLE ALIGN=RIGHT BORDER=1 BGCOLOR=RED width=20%> <TR><TD>This table has a red background.</TD></TR></TABLE>

<TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BGCOLOR=RED>This cell has a red background.</TD></TR></TABLE> IExplore

BORDERCOLOR= #rrggbb or colorname Sets border color and must be used with the BORDER attribute. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BORDERCOLOR can also be set to a colorname. See Using Color. <TABLE ALIGN=RIGHT BORDER=1 BORDERCOLOR=RED width=20%> <TR><TD>This table has a red border.</TD></TR></TABLE>
<TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BORDERCOLOR=RED>This cell has a red border.</TD></TR></TABLE> IExplore

BORDERCOLORLIGHT= #rrggbb or colorname Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORDARK, and must be used with the BORDER attribute. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BORDERCOLORLIGHT can also be set to a colorname. See Using Color. <TABLE ALIGN=RIGHT BORDER=1 BORDERCOLORLIGHT=RED width=20%> <TR><TD>This table has one half of the 3-D border set to red.</TD></TR></TABLE>
<TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BORDERCOLORLIGHT=RED>This cell has one half of the 3-D border set to red.</TD></TR></TABLE> IExplore

BORDERCOLORDARK= #rrggbb or colorname Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORLIGHT, and must be used with the BORDER attribute. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BORDERCOLORDARK can also be set to a colorname. See Using Color. <TABLE ALIGN=RIGHT BORDER=1 BORDERCOLORDARK=RED width=20%> <TR><TD>This table has one half of the 3-D border set to red.</TD></TR></TABLE>
<TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BORDERCOLORDARK=RED>This cell has one half of the 3-D border set to red.</TD></TR></TABLE> IExplore

VALIGN=TOP, or BOTTOM Specifies that the text can be top- or bottom-aligned. The default is center-aligned. <TABLE BORDER=1 width=20% VALIGN=TOP><TR><TD>The text in this table is top-aligned.</TD></TR></TABLE>
<TABLE BORDER=1 width=20%><TR><TD VALIGN=TOP>The text in this cell is top-aligned.</TD></TR></TABLE> IExplore

Attribute	Explanation	Example	Support
ALIGN=LEFT, or RIGHT	Specifies that the table or the text can be left- or right-aligned. The default is left-aligned for TABLE, TR, and TD. The default is center-aligned for TH.	<TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD>This table is right-aligned.</TD></TR></TABLE> <TABLE BORDER=1 width=20%> <TR><TD ALIGN=RIGHT>The text in this cell is right-aligned.</TD></TR></TABLE>	IExplore
BACKGROUND=" URL"	Specifies a background picture. The picture is tiled behind the text and graphics in the table, table head, or table cell.	<TABLE BACKGROUND="linoleum.gif"> … </TABLE>	IExplore
BGCOLOR= #rrggbb or colorname	Sets background color. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BGCOLOR and each of the other color attributes here can also be set to a colorname. See Using Color.	<TABLE ALIGN=RIGHT BORDER=1 BGCOLOR=RED width=20%> <TR><TD>This table has a red background.</TD></TR></TABLE> <TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BGCOLOR=RED>This cell has a red background.</TD></TR></TABLE>	IExplore
BORDERCOLOR= #rrggbb or colorname	Sets border color and must be used with the BORDER attribute. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BORDERCOLOR can also be set to a colorname. See Using Color.	<TABLE ALIGN=RIGHT BORDER=1 BORDERCOLOR=RED width=20%> <TR><TD>This table has a red border.</TD></TR></TABLE> <TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BORDERCOLOR=RED>This cell has a red border.</TD></TR></TABLE>	IExplore
BORDERCOLORLIGHT= #rrggbb or colorname	Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORDARK, and must be used with the BORDER attribute. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BORDERCOLORLIGHT can also be set to a colorname. See Using Color.	<TABLE ALIGN=RIGHT BORDER=1 BORDERCOLORLIGHT=RED width=20%> <TR><TD>This table has one half of the 3-D border set to red.</TD></TR></TABLE> <TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BORDERCOLORLIGHT=RED>This cell has one half of the 3-D border set to red.</TD></TR></TABLE>	IExplore
BORDERCOLORDARK= #rrggbb or colorname	Sets independent border color control over one of the two colors used to draw a 3-D border, opposite of BORDERCOLORLIGHT, and must be used with the BORDER attribute. rrggbb is a hexadecimal number denoting a red-green-blue color value (the number sign is optional). BORDERCOLORDARK can also be set to a colorname. See Using Color.	<TABLE ALIGN=RIGHT BORDER=1 BORDERCOLORDARK=RED width=20%> <TR><TD>This table has one half of the 3-D border set to red.</TD></TR></TABLE> <TABLE ALIGN=RIGHT BORDER=1 width=20%> <TR><TD BORDERCOLORDARK=RED>This cell has one half of the 3-D border set to red.</TD></TR></TABLE>	IExplore
VALIGN=TOP, or BOTTOM	Specifies that the text can be top- or bottom-aligned. The default is center-aligned.	<TABLE BORDER=1 width=20% VALIGN=TOP><TR><TD>The text in this table is top-aligned.</TD></TR></TABLE> <TABLE BORDER=1 width=20%><TR><TD VALIGN=TOP>The text in this cell is top-aligned.</TD></TR></TABLE>	IExplore

CAPTION

Specifies a caption for a table and must be used within the TABLE tag.

Attribute Explanation Example Support

ALIGN=LEFT, RIGHT, or CENTER Draws the caption left-aligned, right-aligned, or centered with the table borders. <TABLE><CAPTION ALIGN=CENTER>This caption will be centered between the left and right borders of the table.</CAPTION><TR><TD>This is a cell in the table.</TD></TR></TABLE> HTML 3

VALIGN=TOP, or BOTTOM Draws the caption on the top or the bottom of the table. <TABLE><CAPTION ALIGN=CENTER VALIGN=BOTTOM>This caption will appear centered below the table.</CAPTION><TR><TD>This is a cell in the table.</TD></TR></TABLE> HTML 3

Attribute	Explanation	Example	Support
ALIGN=LEFT, RIGHT, or CENTER	Draws the caption left-aligned, right-aligned, or centered with the table borders.	<TABLE><CAPTION ALIGN=CENTER>This caption will be centered between the left and right borders of the table.</CAPTION><TR><TD>This is a cell in the table.</TD></TR></TABLE>	HTML 3
VALIGN=TOP, or BOTTOM	Draws the caption on the top or the bottom of the table.	<TABLE><CAPTION ALIGN=CENTER VALIGN=BOTTOM>This caption will appear centered below the table.</CAPTION><TR><TD>This is a cell in the table.</TD></TR></TABLE>	HTML 3

TABLE - HTML 3

These tags are specific to HTML 3.0 tables.

Attribute Explanation Example Support

THEAD Defines the table header. <TABLE>
<THEAD>This is the header section of a table.
<TR>
</TR>
</THEAD>
</TABLE> HTML 3

TBODY Defines the table body. <TABLE>
<TBODY>This is the body section of a table.
<TR>
</TR>
</TBODY>
</TABLE> HTML 3

TFOOT Defines the table footer. <TABLE>
<TFOOT>This is the footer section of a table.
<TR>
</TR>
</TFOOT>
</TABLE> HTML 3

COLGROUP Groups and aligns columns within tables. For more information, see Columns. <TABLE>
<THEAD>
<COLGROUP>This defines a column group.
</COLGROUP>
</THEAD>
</TABLE> HTML 3

COL Specifies the properties of a column. For more information, see Columns. <TABLE>
<COLGROUP>
<COL>Here is a sample column definition.
</COL>
</COLGROUP>
</TABLE> HTML 3

FRAME Specifies which sides of a frame (outer borders) are displayed. For more information, see Table Frames. <TABLE FRAME=>
<THEAD>
</THEAD>
</TABLE> HTML 3

RULES Specifies which dividing lines (inner borders) are displayed. For more information, see Table Rules. <TABLE RULES=>
<THEAD>
</THEAD>
</TABLE> HTML 3

Attribute	Explanation	Example	Support
THEAD	Defines the table header.	<TABLE> <THEAD>This is the header section of a table. <TR> </TR> </THEAD> </TABLE>	HTML 3
TBODY	Defines the table body.	<TABLE> <TBODY>This is the body section of a table. <TR> </TR> </TBODY> </TABLE>	HTML 3
TFOOT	Defines the table footer.	<TABLE> <TFOOT>This is the footer section of a table. <TR> </TR> </TFOOT> </TABLE>	HTML 3
COLGROUP	Groups and aligns columns within tables. For more information, see Columns.	<TABLE> <THEAD> <COLGROUP>This defines a column group. </COLGROUP> </THEAD> </TABLE>	HTML 3
COL	Specifies the properties of a column. For more information, see Columns.	<TABLE> <COLGROUP> <COL>Here is a sample column definition. </COL> </COLGROUP> </TABLE>	HTML 3
FRAME	Specifies which sides of a frame (outer borders) are displayed. For more information, see Table Frames.	<TABLE FRAME=> <THEAD> </THEAD> </TABLE>	HTML 3
RULES	Specifies which dividing lines (inner borders) are displayed. For more information, see Table Rules.	<TABLE RULES=> <THEAD> </THEAD> </TABLE>	HTML 3

COL, COLGROUP

Provides additional information for table columns.

Attribute Explanation Example Support

COL SPAN= Sets the amount of columns affected by the element. <TABLE>
<COLGROUP>
<COL WIDTH="1*" SPAN=3>The width will affect three different columns.
</COL>
</COLGROUP>
</TABLE> HTML 3

COL ALIGN="center", "justify", "left", "right" Specifies the column and text alignment. The default is center. <TABLE><COL ALIGN=RIGHT>This column is right-aligned.</COL></TABLE> HTML 3

COLGROUP ALIGN="center", "justify", "left", "right" Specifies the column group and text alignment. The default is center. <COLGROUP ALIGN=LEFT><COL>This column group is left-aligned.</COL></COLGROUP> HTML 3

COLGROUP VALIGN="baseline", "bottom", "middle", "top" Specifies the vertical alignment of text within a column. <COLGROUP VALIGN=BOTTOM><COL>The text within this column group is bottom-aligned.</COL></COLGROUP> HTML 3

Attribute	Explanation	Example	Support
COL SPAN=	Sets the amount of columns affected by the element.	<TABLE> <COLGROUP> <COL WIDTH="1*" SPAN=3>The width will affect three different columns. </COL> </COLGROUP> </TABLE>	HTML 3
COL ALIGN="center", "justify", "left", "right"	Specifies the column and text alignment. The default is center.	<TABLE><COL ALIGN=RIGHT>This column is right-aligned.</COL></TABLE>	HTML 3
COLGROUP ALIGN="center", "justify", "left", "right"	Specifies the column group and text alignment. The default is center.	<COLGROUP ALIGN=LEFT><COL>This column group is left-aligned.</COL></COLGROUP>	HTML 3
COLGROUP VALIGN="baseline", "bottom", "middle", "top"	Specifies the vertical alignment of text within a column.	<COLGROUP VALIGN=BOTTOM><COL>The text within this column group is bottom-aligned.</COL></COLGROUP>	HTML 3

FRAME

Provides additional information for table frames. You may only specify frames for tables containing the THEAD, TBODY, and TFOOT elements.

Attribute Explanation Example Support

FRAME="void" Removes all outside table borders. <TABLE FRAME=void>
<THEAD>
</THEAD>
</TABLE> HTML 3

FRAME="above" Displays a border on the top side of the table frame. <TABLE FRAME=above>
<THEAD>
</THEAD>
</TABLE> HTML 3

FRAME="below" Displays a border on the bottom side of the table frame. <TABLE FRAME=below>
<THEAD>
</THEAD>
</TABLE> HTML 3

FRAME="hsides" Displays a border on the top and bottom sides of the table frame. <TABLE FRAME=hsides>
<THEAD>
</THEAD>
</TABLE> HTML 3

FRAME="lhs" Displays a border on the left-hand side of the table frame. <TABLE FRAME=lhs>
<THEAD>
</THEAD>
</TABLE> HTML 3

FRAME="rhs" Displays a border on the right-hand side of the table frame. <TABLE FRAME=rhs>
<THEAD>
</THEAD>
</TABLE> HTML 3

FRAME="vsides" Displays a border on the left and right sides of the table frame. <TABLE FRAME=vsides>
<THEAD>
</THEAD>
</TABLE> HTML 3

FRAME="box" Displays a border on all sides of the table frame. <TABLE FRAME=box>
<THEAD>
</THEAD>
</TABLE> HTML 3

Attribute	Explanation	Example	Support
FRAME="void"	Removes all outside table borders.	<TABLE FRAME=void> <THEAD> </THEAD> </TABLE>	HTML 3
FRAME="above"	Displays a border on the top side of the table frame.	<TABLE FRAME=above> <THEAD> </THEAD> </TABLE>	HTML 3
FRAME="below"	Displays a border on the bottom side of the table frame.	<TABLE FRAME=below> <THEAD> </THEAD> </TABLE>	HTML 3
FRAME="hsides"	Displays a border on the top and bottom sides of the table frame.	<TABLE FRAME=hsides> <THEAD> </THEAD> </TABLE>	HTML 3
FRAME="lhs"	Displays a border on the left-hand side of the table frame.	<TABLE FRAME=lhs> <THEAD> </THEAD> </TABLE>	HTML 3
FRAME="rhs"	Displays a border on the right-hand side of the table frame.	<TABLE FRAME=rhs> <THEAD> </THEAD> </TABLE>	HTML 3
FRAME="vsides"	Displays a border on the left and right sides of the table frame.	<TABLE FRAME=vsides> <THEAD> </THEAD> </TABLE>	HTML 3
FRAME="box"	Displays a border on all sides of the table frame.	<TABLE FRAME=box> <THEAD> </THEAD> </TABLE>	HTML 3

RULES

Provides additional information for table rules. You may only specify rules for tables containing the THEAD, TBODY, and TFOOT elements.

Attribute Explanation Example Support

RULES="none" Removes all interior table borders. <TABLE RULES=none>
<THEAD>
</THEAD>
</TABLE> HTML 3

RULES="basic" Displays horizontal borders between THEAD, TBODY, and TFOOT. <TABLE RULES=basic>
<THEAD>
</THEAD>
</TABLE> HTML 3

RULES="rows" Displays horizontal borders between all table rows. <TABLE RULES=rows>
<THEAD>
</THEAD>
</TABLE> HTML 3

RULES="cols" Displays horizontal borders between all table columns. <TABLE RULES=cols>
<THEAD>
</THEAD>
</TABLE> HTML 3

RULES="all" Displays a border on all rows and columns. <TABLE RULES=all>
<THEAD>
</THEAD>
</TABLE> HTML 3

Attribute	Explanation	Example	Support
RULES="none"	Removes all interior table borders.	<TABLE RULES=none> <THEAD> </THEAD> </TABLE>	HTML 3
RULES="basic"	Displays horizontal borders between THEAD, TBODY, and TFOOT.	<TABLE RULES=basic> <THEAD> </THEAD> </TABLE>	HTML 3
RULES="rows"	Displays horizontal borders between all table rows.	<TABLE RULES=rows> <THEAD> </THEAD> </TABLE>	HTML 3
RULES="cols"	Displays horizontal borders between all table columns.	<TABLE RULES=cols> <THEAD> </THEAD> </TABLE>	HTML 3
RULES="all"	Displays a border on all rows and columns.	<TABLE RULES=all> <THEAD> </THEAD> </TABLE>	HTML 3

Back to: HTML Specification Home Page