HTML 4.01 and XHTML 1.0 Reference: <table> Tag

HTML <table> Tag
Syntax	This element uses separate opening and closing tags. <table>...</table>
Usage	The <table> tag is used to create a table. A table is made up of individual cells which are organized into rows and columns. The individual cells are defined using the table header cell <th> and table data cell <td> tags. These tags are contained within a table row element which is defined using a <tr> tag. A basic table can be created using the <table>, <tr>, <th>, and <td> tags. The following is a list of additional table related tags: <caption>, <thead>, <tfoot>, <tbody>, <colgroup>, and <col>. All of the tags used in a table are contained between the opening and closing <table> tags. HTML & XHTML <table> tag example. <table border="1" summary="stock tracker"> <tr> <th colspan="3">Stock Tracker</th> </tr> <tr> <th>Stock Symbol</th> <td>MSFT</td> <td>GOOG</td> </tr> <tr> <th>Profit</th> <td>$723.48</td> <td>$1254.58</td> </tr> </table>
Content Model	The <table> element can contain the following tags between its opening and closing tags. <caption> <col> <colgroup> <tbody> <tfoot> <thead> <tr>

Red attributes have been deprecated

<table> Tag Attribute Summary
Required	Tag Specific	Core	Focus	Events	Language
	align bgcolor border cellpadding cellspacing frame rules summary width	id class style title		onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup	dir lang xml:lang¹
Notes: 1. XHTML only.

Red attributes have been deprecated

<table> Tag Attributes

Attribute

Description

align

The align attribute specifies the horizontal alignment within the web page. Possible values are "center", "left", and "right".

HTML & XHTML <table> example using the align, bgcolor, border, and summary attributes.

<table align="right" bgcolor="yellow" border="3" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

Note: This attribute has been deprecated.

bgcolor

The bgcolor attribute specifies the background color of the cells within the table. The color value can be expressed as an sRGB value which is a hash (#) symbol followed by a hexadecimal value. Or, the color value can be expressed as a color name. Color names are black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, or aqua.

HTML & XHTML <table> example using the align, bgcolor, border, and summary attributes.

<table align="right" bgcolor="yellow" border="3" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

Note: This attribute has been deprecated.

border

The border attribute specifies the width, in pixels, of a border around the table. The border can be turned off by setting the value to 0.

HTML & XHTML <table> example using the align, bgcolor, border, and summary attributes.

<table align="right" bgcolor="yellow" border="3" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

cellpadding

The cellpadding attribute specifies the space between the border of a cell and the contents of a cell. The value is in pixels.

HTML & XHTML <table> example using cellpadding and cellspacing.

<table cellpadding="20" cellspacing="20" border="1" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

cellspacing

The cellspacing attribute specifies the space between individual cells. It also specifies the space between the outside border and the cells. The value is in pixels.

HTML & XHTML <table> example using cellpadding and cellspacing.

<table cellpadding="20" cellspacing="20" border="1" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

frame

The frame attribute specifies which sides of the table's outside border are visible. Possible values are shown in the following table.

frame attribute value	Description
"void"	The border is not visible.
"above"	The border is visible on the top side only.
"below"	The border is visible on the bottom side only.
"hsides"	The border is visible on the top and bottom sides only.
"vsides"	The border is visible on the left and right sides only.
"lhs"	The border is visible on the left hand side only.
"rhs"	The border is visible on the right hand side only.
"box"	The border is visible on all four sides.
'border"	The border is visible on all four sides.

HTML & XHTML <table> example using the frame attribute.

<table frame="hsides" border="3" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

rules

The rules attribute specifies which rules (borders between cells) are visible. Possible values are shown in the following table.

rules attribute value	Description
"none"	No rules are visible.
"groups"	The rules will only be visible between row groups (see <thead>, <tfoot>, and <tbody>) and column groups (see <colgroup> and <col>).
"rows"	The rules will be visible between the rows only.
"cols"	The rules will be visible between the columns only.
"all"	All rules will be visible.

HTML & XHTML <table> example using the rules attribute.

<table rules="cols" border="1" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

summary

The summary attribute is used to provide a summary for the contents of the table. The contents of the summary attribute are generally not displayed in visual browsers. However, the summary attribute may make the table's contents more accessible for non-visual browsers.

HTML & XHTML <table> example using the align, bgcolor, border, and summary attributes.

<table align="right" bgcolor="yellow" border="3" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

width

The width attribute is used to specify the width of the table. The value is in pixels, or percentage when followed by a percent sign (%). If the value is specified as a percentage, it refers to a percentage of the available space.

HTML & XHTML <table> example using the width attribute.

<table width="50%" border="1" summary="stock profits">
 <tr>
  <th colspan="3">Stock Tracker</th>
 </tr>
 <tr>
  <th>Stock Symbol</th>
  <td>MSFT</td>
  <td>GOOG</td>
 </tr>
 <tr>
  <th>Profit</th>
  <td>$723.48</td>
  <td>$1254.58</td>
 </tr>
</table>

The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example

class

The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example

style

The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example

title

The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example

onclick

The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example

ondblclick

The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example

onkeydown

The onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example

onkeypress

The onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example

onkeyup

The onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example

onmousedown

The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example

onmousemove

The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example

onmouseout

The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example

onmouseover

The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example

onmouseup

The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example

dir

The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example

lang

The lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example

xml:lang

The xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example

Note: XHTML only.

HTML <table> Tag Examples
<table> tag example. <table> example using the align, bgcolor, border, and summary attributes. <table> example using cellpadding and cellspacing. <table> example using the frame attribute. <table> example using the rules attribute. <table> example using the width attribute.