<table> (Table)
This element is used to define a table. Tables are used to organize data as well as to provide structure for laying out pages when not using CSS.
Standard Syntax
<table
align="center | left | right" (transitional only)</table>
bgcolor="color name | #RRGGBB" (transitional only)
border="pixels"
cellpadding="pixels"
cellspacing="pixels"
class="class name(s)"
dir="ltr | rtl"
frame="above | below | border | box | hsides |
lhs | rhs | void | vsides"
id="unique alphanumeric identifier"
lang="language code"
rules="all | cols | groups | none | rows"
style="style information"
summary="summary information"
title="advisory text"
width="percentage | pixels"
caption, col, colgroup, thead, tbody, tfoot, and tr elements only
Nonstandard Attributes Commonly Supported
background="url of image" file
bordercolor="color name | #RRGGBB"
cols="number of columns"
height="percentage | pixels"
hspace="pixels" (Netscape variants only)
vspace="pixels" (Netscape variants only)
Attributes Defined by Internet Explorer
accesskey="key" (5.5)
bordercolordark="color name | #RRGGBB" (4)
bordercolorlight="color name | #RRGGBB" (4)
datapagesize="number of records to display" (4)
datasrc="data source id" (4)
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="on | off" (5.5)
Standard Event Attributes
onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
Events Defined by Internet Explorer
onactivate, onbeforeactivate, onbeforecut, onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onblur, oncontextmenu, oncontrolselect, oncopy, oncut, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusin, onfocusout, onhelp, onlosecapture, onmouseenter, onmouseleave, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll, onselectstart, ontimeerror
Element Specific Attributes
- align
- This attribute specifies the alignment of the table with respect to surrounding text. The HTML 4.01 specification defines center, left, and right. WebTV also defines bleedleft and bleedright, which cause the table to bleed over the right and left margins of the page, and justify, which is used to justify the table within the browser window. Some browsers also might support alignment values, such as absmiddle, that are common to block objects.
- background
- This nonstandard attribute, which is supported by Internet Explorer, Netscape, and WebTV, specifies the URL of a background image for the table. The image is tiled if it is smaller than the table dimensions. Netscape displays the background image in each table cell, rather than behind the complete table like in Internet Explorer.
- bgcolor
- This attribute specifies a background color for a table. Its value can be either a named color, such as red, or a color specified in the hexadecimal #RRGGBB format, such as #FF0000.
- border
- This attribute specifies in pixels the width of a table's borders. A value of 0 makes a borderless table, which is useful for graphic layout.
- bordercolor
- This attribute, supported by Internet Explorer 4 and Netscape 4, is used to set the border color for a table. The attribute should be used only with a positive value for the border attribute. The value of the attribute can be either a named color, such as green, or a color specified in the hexadecimal #RRGGBB format, such as #00FF00. Internet Explorer colors the entire table border, including cell borders; Netscape colors only the outer border of the table.
- bordercolordark
- This Internet Explorer-specific attribute specifies the darker of two border colors used to create a three-dimensional effect for cell borders. It must be used with the border attribute set to a positive value. The attribute value can be either a named color, such as blue, or a color specified in the hexadecimal #RRGGBB format, such as #00FF00.
- bordercolorlight
- This Internet Explorer-specific attribute specifies the lighter of two border colors used to create a three-dimensional effect for cell borders. It must be used with the border attribute set to a positive value. The attribute value can be either a named color, such as red, or a color specified in the hexadecimal #RRGGBB format, such as #FF0000.
- cellpadding
- This attribute sets the width in pixels between the edge of a cell and its content.
- cellspacing
- This attribute sets the width in pixels between individual cells.
- cols
- This attribute specifies the number of columns in the table and is used to help quickly calculate the size of the table. This attribute was part of the preliminary specification of HTML 4.0, but was later dropped. A few browsers, notably Netscape 4 and higher, already support it.
- datapagesize
- The value of this Microsoft-specific attribute is the number of records that can be displayed in the table when data binding is used.
- datasrc
- The value of this Microsoft-specific attribute is an identifier indicating the data source to pull data from.
- frame
- This attribute specifies which edges of a table are to display a border frame. A value of above indicates only the top edge; below indicates only the bottom edge; and border and box indicate all edges, which is the default when the border attribute is a positive integer. A value of hsides indicates only the top and bottom edges should be displayed; lhs indicates the left-hand edge should be displayed; rhs indicates the right-hand edge should be displayed; vsides indicates the left and right edges both should be displayed; and void indicates no border should be displayed.
- height
- For Netscape 4, this attribute allows the author to specify the height of the table in pixels. Internet Explorer 4 allows both pixels and percentages.
- hspace
- This Netscape-specified attribute indicates the horizontal space in pixels between the table and surrounding content. This attribute also is supported by WebTV but, oddly, not by Internet Explorer.
- rules
- This attribute controls the display of dividing rules within a table. A value of all specifies dividing rules for rows and columns. A value of cols specifies dividing rules for columns only. A value of groups specifies horizontal dividing rules between groups of table cells defined by the <thead>, <tbody>, <tfoot>, or <colgroup> elements. A value of rows specifies dividing rules for rows only. A value of none indicates no dividing rules and is the default.
- summary
- This attribute is used to provide a text summary of the table's purpose and structure. This element is used for accessibility, and its presence is important for nonvisual user agents.
- vspace
- This Netscape attribute indicates the vertical space in pixels between the table and surrounding content. This attribute also is supported by WebTV but, oddly, not by Internet Explorer.
- width
- This attribute specifies the width of the table either in pixels or as a percentage value of the enclosing window.
Examples
<table bgcolor="white" border="2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
<table rules="all" bgcolor="yellow">
<caption>Widgets by Area</caption>
<thead align="center" bgcolor="green" valign="middle">
<td>This is a Header</td>
</thead>
<tfoot align="right" bgcolor="red" valign="bottom">
<td>This is part of the footer.</td>
<td>This is also part of the footer.</td>
</tfoot>
<tbody>
<tr>
<td> </td>
<th>Regular Widget</th>
<th>Super Widget</th>
</tr>
<tr>
<th>West Coast</th>
<td>10</td>
<td>12</td>
</tr>
<tr>
<th>East Coast</th>
<td>1</td>
<td>20</td>
</tr>
</tbody>
</table>
Compatibility
HTML 3.2, 4, and 4.01, XHTML 1.0, 1.1, Basic
Internet Explorer 2, 3, 4, 5, 5.5, 6
Netscape 1.1, 2, 3, 4, 4.5-4.8, 6, 7
Opera 4-7
Notes
In addition to displaying tabular data, tables are used to support graphic layout and design.
The HTML 4 specification reserves the future use of the datafld, dataformatas, and datasrc attributes for the <table> element.
At the time of this writing, most browsers have problems with char and charoff attributes in all table-related tags.
The HTML 3.2 specification defines only the align, border, cellpadding, cellspacing, and width attributes for the <table> element.
The cols attribute might provide an undesirable result under Netscape, which assumes the size of each column in the table is exactly the same.