W3 3.2y
4.0y
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1y

<TABLE>...</TABLE>

Description

Create a table layout which can contain cells in rows and columns. The cells of a table are specified with the TR, TH and TD elements. You can give a table a caption with the CAPTION element.

A general layout for a table is this :

Source
<TABLE>
 <CAPTION>The table caption</CAPTION>
 <TR>
  <TH>Table headers</TH>
 </TR>
  <TR>
  <TD>Table data</TD>
 </TR>
</TABLE>

If you do not supply values for width and height in the table, rows and cells the browser will create a layout based on the contents of the table cells.

If you want to display an empty cell, because of the background, the background color or a border, fill the cell with a non-breaking space, &nbsp;.

DTD

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ATTLIST TABLE                        -- table element --
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- purpose/structure for speech output--
  width       %Length;       #IMPLIED  -- table width --
  border      %Pixels;       #IMPLIED  -- controls frame width around table --
  frame       %TFrame;       #IMPLIED  -- which parts of frame to render --
  rules       %TRules;       #IMPLIED  -- rulings between rows and cols --
  cellspacing %Length;       #IMPLIED  -- spacing between cells --
  cellpadding %Length;       #IMPLIED  -- spacing within cells --
  >
from the HTML 4.0 DTD, "Copyright © W3C, (MIT, INRIA, Keio). All Rights Reserved."

Attributes

Core attributes: class id style title
Internationalization attributes: dir lang
Events: onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup

W3 3.2y
4.0d
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1n
ALIGN
Specifies the alignment of the table inside the current left and right margins. Valid values are LEFT and RIGHT. The default is LEFT. Other content will flow around the table when one of these values is used. Netscape Navigator 4.0 also supports the value CENTER, which centers the complete table, but doesn't let other content flow round.

The WebTV browser but introduces two values, bleedleft and bleedright, which causes the table to bleed over the margin into the left side or right side of the page.

Netscape Navigator 3.0 has a bug with the ALIGN attribute. When align="right" is used in a nested table, sometimes no table is displayed.


W3 3.2n
4.0n
NS 3.0n
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1y
BACKGROUND
Supply an image that is used as the background of the table. If the table is larger than the image the image is tiled to fill up the used space. You can use images in the GIF and JPEG format.
If you use an transparent image the transparent parts will be shown in the background color of the table, or the background of the document if no background color is supplied for the table.
W3 3.2n
4.0d
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1y
BGCOLOR
Set the background color of the table.

This attribute can be used in conjunction with the GRADCOLOR attribute, which sets the ending color for the background gradient.
See the page Using colors for a description on specifying colors.


W3 3.2y
4.0y
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1y
BORDER
Defines the width of the border surrounding the cells in the table, in pixels. If you do not specify a value after the keyword, 1 is used. You must specify this attribute if you use the FRAME or RULES attribute.
W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0y
4.0y
TV 1.2n
2.1n
BORDERCOLOR
Set the color of the border of the table. This attribute only has effect if the table has a border.

If the BORDERCOLOR attribute is used and/or the BORDERCOLORLIGHT BORDERCOLORDARK are also used, the value of BORDERCOLOR will not be used.
See the page Using colors for a description on specifying colors.


W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0y
4.0y
TV 1.2n
2.1n
BORDERCOLORLIGHT
Sets the color of one of the two colors used to draw a 3-D border, the other is set with BORDERCOLORDARK. This attribute only has effect if the table has a border.

If both the BORDERCOLOR and BORDERCOLORLIGHT are used, the value of the BORDERCOLORLIGHT attribute will be used.
See the page Using colors for a description on specifying colors.


W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0y
4.0y
TV 1.2n
2.1n
BORDERCOLORDARK
Sets the color of one of the two colors used to draw a 3-D border, the other is set with BORDERCOLORLIGHT. This attribute only has effect if the table has a border.

If both the BORDERCOLOR and BORDERCOLORDARK are used, the value of the BORDERCOLORDARK attribute will be used.
See the page Using colors for a description on specifying colors.


W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0n
4.0n
TV 1.2y
2.1n
CELLBORDER
Use the cellborder attribute to set the width of the border for table cells in pixels. By default, the border for the cells is the same as for the table. Use the border attribute to set the border width for the table.
W3 3.2y
4.0y
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1y
CELLPADDING
Creates a boundary between the data of a table cell and the border of the cell, in pixels, or as a percentage.
W3 3.2y
4.0y
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1y
CELLSPACING
Creates a border around every cell, in pixels, or as a percentage. This border belongs to the border of the table.

Netscape Navigator 3.0 will draw this area in the color/image of the containing document, not those from the table.


W3 3.2n
4.0n
NS 3.0n
4.0y
IE 3.0n
4.0n
TV 1.2n
2.1n
COLS
With this attribute you can let the browser calculate the width that each column will have. This width is calculated from the total width of the table, which is either a value supplied with the WIDTH attribute or the width of the current window:
                  total width
column width = -------------------
                number of columns
If the contents of a column do not fit in the calculated width then the column will grow wider, but the other columns will remain the originally calculated width.

If you put more columns in the table than stated in the COLS value the extra columns will be as wide as needed, and the width of all other columns will be reduced evenly.


W3 3.2n
4.0y
NS 3.0n
4.0n
IE 3.0y
4.0y
TV 1.2n
2.1n
FRAME
This attribute determines which part of the border of the table will be visible. To be effective you must also specify the BORDER attribute. Possible values for the FRAME attribute are :

Value Description
ABOVE Only display a border above the table.
BELOW Only display a border below the table.
BORDER/BOX Display all four borders. You do not need to use the FRAME attribute to get this effect, because using only the BORDER attribute will do the same.
HSIDES Display the border on the left and right side.
LHS Only display a border on the left-hand side of the table.
RHS Only display a border on the right-hand side of the table.
VOID No borders around the table will be displayed. Borders between cells will be displayed.
VSIDES Display a border above and below the table.
You can use this attribute multiple times with values that do not exclude each other, for example to display a border above and on the right-hand side of a table.


W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0n
4.0n
TV 1.2n
2.1y
GRADANGLE
Defines the gradient angle of a table. Values range from 90 to -90 degrees.
gradangle="0" creates a simple left-to-right gradient.
gradangle="90" creates a top-to-bottom gradient.
W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0n
4.0n
TV 1.2n
2.1y
GRADCOLOR
Defines the ending color for a background gradient in a table. Colors can be specified either as hexadecimal color values or as predefined color names. This attribute must be used in conjunction with the BGCOLOR attribute, which sets the starting color for the background gradient.
See the page Using colors for a description on specifying colors.
W3 3.2n
4.0n
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2n
2.1n
HEIGHT
Set the height of the table. The value can be supplied as a number of pixels or a percentage of the current available height. Note that using a percentage with a nested table is ignored by some browsers.
If the contents of the table cannot be displayed in the given height the table will be enlarged to make everything fit. If you do not supply a height the browser determines the height automatically, based on the table contents.
W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0n
4.0n
TV 1.2y
2.1n
HREF
Use the href attribute to set the destination URL for the table. The href attribute causes the entire table to become an anchor and defines the URL for that anchor. When the viewer selects the table, the WebTV interface will go to that page.
W3 3.2n
4.0n
NS 3.0n
4.0y
IE 3.0n
4.0n
TV 1.2n
2.1y
HSPACE
Set the amount of space, in pixels, that the browser should keep free on the between the left and right sides of the table and other content.

This attribute only has an effect when the attribute align="left" or align="right" is used also.


W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0n
4.0n
TV 1.2y
2.1y
NOWRAP
Prevents table rows from wrapping if they extend beyond the right margin of the Web page.
W3 3.2n
4.0y
NS 3.0n
4.0n
IE 3.0y
4.0y
TV 1.2n
2.1n
RULES
Set additional options to draw the border of table cells. To be effective you must also specify the BORDER attribute. Possible values are:

Value Description
ALL Display a border on all rows and columns.
BASIC Displays horizontal borders between the THEAD, TBODY, and TFOOT portions of a table.
COLS Displays horizontal borders between all table columns.
GROUPS Displays vertical borders between the groups of columns, as they are defined with the COL element and the COLGROUP element.
NONE Removes all interior table borders.
ROWS Displays horizontal borders between all table rows.


W3 3.2n
4.0y
NS 3.0n
4.0n
IE 3.0n
4.0n
TV 1.2n
2.1n
SUMMARY
This attribute supplies a summary of the contents of the table, that can be used by non-visual browsers.
W3 3.2n
4.0n
NS 3.0n
4.0n
IE 3.0n
4.0n
TV 1.2y
2.1y
TRANSPARENCY
With version 1.1 of the WebTV interface, use the transparency attribute for the background color for the table. The value for the transparency attribute can range from 0 (fully opaque) to 100 (fully transparent). The default value for transparency is 0. Note that the WebTV interface has implemented optimizations for a transparency value of 50 that make pages draw faster.
W3 3.2n
4.0n
NS 3.0n
4.0y
IE 3.0n
4.0n
TV 1.2n
2.1n
VSPACE
Set the amount of space, in pixels, that the browser should keep free above and below the table and other content.

This attribute only has an effect when the attribute align="left" or align="right" is used also.


W3 3.2y
4.0y
NS 3.0y
4.0y
IE 3.0y
4.0y
TV 1.2y
2.1y
WIDTH
Set the width of the table. The value can be supplied as a number of pixels or a percentage of the current available space between the left and right margins.
If the contents of the table cannot be displayed in the given width the table will be enlarged to make everything fit. If you do not supply a width the browser determines the width automatically, based on the table contents.

Examples

Source
A right-aligned table
<TABLE border="5" width="50%" align="right" background="BACKGROUND.gif">
<TR>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
</TR>
</TABLE>
 
Result
A right-aligned table
The cell contents The cell contents
 
Source
A table with a wider border, but only on the left- and
right-hand side.
<TABLE border="5" frame="hsides" width="50%" cellspacing="8" background="BACKGROUND.gif">
<TR>
<TD bgcolor="#AFFF79"><SPAN style="color: #000">The cell contents</SPAN></TD>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
</TR>
</TABLE>
 
Result
A table with a wider border, but only on the left- and right-hand side.
The cell contents The cell contents
 
Source
A table with a boundary of 8 pixels
<TABLE border="5" width="50%" cellpadding="8" bgcolor="#ffaf79"
bordercolordark="#00a000" bordercolorlight="#00ffff" background="BACKGROUND.gif">
<TR>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
<TD><SPAN style="color: #000">The cell contents</SPAN></TD>
</TR>
</TABLE>
 
Result
A table with a boundary of 8 pixels
The cell contents The cell contents
Statistics