NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

HTML XHTML The Complete Reference
home » reference » appendix a » html element reference

<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)
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
</table>

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.

(X)HTML Elements
CSS Properties
Previous: sup Next: tbody
< Home | About | Chapters | Examples | Errata | Reference | Site Map >