Overview

Tables in HTML are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).

The following table lists the HTML table tags:

Tag	Description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell
<caption>	Defines a table caption
<colgroup>	Defines a group of columns in a table, for formatting
<col />	Defines attribute values for one or more columns in a table
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

Table Headers

Header information for a table is defined with the <th> tag. The text within a header will be bold and centered by default.

Table Borders

If no border attribute is specified, the table will be displayed without borders. To specify a border, set the attribute to the number of pixels wide the border should be:

The following example shows a basic table with a 1-pixel border, a header row, a row of data, and 2 columns:

<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
</table>

This produces the following result:

Tag Description

The <table> tag is used to define an HTML table which presents data in rows and columns. A simple HTML table consists of the table element and one or more tr, th, and td elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

This tag has the form:

<table>
</table>

HTML5 and HTML4.01 Differences

Only the "summary" attribute is supported in HTML5.

Attributes

Attribute	Value	Description
align	left right center	(deprecated in 4.01) Aligns the content in a table row HTML4:  HTML5:
bgcolor	rgb(x,x,x) #xxxxxx colorname	(deprecated in 4.01) Specifies the background color for a table HTML4:  HTML5:
border	pixels	Specifies the width of the borders around a table HTML4:  HTML5:
cellpadding	pixels	Specifies the space between the cell wall and the cell content Not supported in HTML5
cellspacing	pixels	Specifies the space between cells HTML4:  HTML5:
frame	void above below hsides lhs rhs vsides box border	Specifies which parts of the outside borders that should be visible HTML4:  HTML5:
rules	none groups rows cols all	Specifies which parts of the inside borders that should be visible HTML4:  HTML5:
summary	text	Specifies a summary of the content of a table
width	pixels %	Specifies the width of a table HTML4:  HTML5:

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
</table>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset

Miscellaneous Information

Defined In:	HTML 2
Empty Tag:	No

Tag Description

The td tag is used to define a cell in an HTML table.

By default, the text in a <td> element has normal weight and is left-aligned.

This tag has the form:

<td abbr="text"
  axis="text"
  colspan="number"
  headers="cell ID …"
  rowspan="number">
</td>

HTML5 and HTML4.01 Differences

Some HTML4.01 attributes are not supported in HTML5.

Attributes

Attribute	Value	Description
abbr	text	Specifies an abbreviated version of the content in a cell HTML4:  HTML5:
align	left right center justify char	Aligns the content in a table row HTML4:  HTML5:
axis	category_ name	Categorizes cells HTML4:  HTML5:
bgcolor	rgb(x,x,x) #xxxxxx colorname	Specifies a background color for a cell HTML4:  HTML5:
char	character	Aligns the content in a cell to a character HTML4:  HTML5:
charoff	number	Sets the number of characters the content will be aligned from the character specified by the char attribute HTML4:  HTML5:
colspan	number	Specifies the number of columns a cell should span
headers	header cells'_id	Specifies the table headers related to a cell
height	pixels %	Sets the height of a cell HTML4:  HTML5:
nowrap	nowrap	Specifies that the content inside a cell should not wrap HTML4:  HTML5:
rowspan	number	Sets the number of rows a cell should span
scope	col colgroup row rowgroup	Defines a way to associate header cells and data cells in a table HTML4:  HTML5:
valign	top middle bottom baseline	Vertically aligns the content in a cell HTML4:  HTML5:
width	pixels %	Specifies the width of a cell HTML4:  HTML5:

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<table border="1">
  <tr>
    <td>Body 1.1</td>
    <td>Body 1.2</td>
  </tr>
  <tr>
    <td>Body 2.1</td>
    <td>Body 2.2</td>
  </tr>
</table>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset

Miscellaneous Information

Defined In:	HTML 2
Empty Tag:	No

Tag Description

The <th> tag is used to define a header cell in an HTML table.

By default, the text in a <th> element has bold weight and is center-aligned.

This tag has the form:

<th abbr="text"
  axis="category_name"
  colspan="number"
  headers="cell ID …"
  rowspan="number"
  scope="{ col | colgroup | row | rowgroup }" >
</th>

HTML5 and HTML4.01 Differences

Some HTML4.01 attributes are not supported in HTML5.

Attributes

Attribute	Value	Description
abbr	text	Specifies an abbreviated version of the content in a cell HTML4:  HTML5:
align	left right center justify char	Aligns the content in a table row HTML4:  HTML5:
axis	category_ name	Categorizes cells HTML4:  HTML5:
bgcolor	rgb(x,x,x) #xxxxxx colorname	Specifies a background color for a cell HTML4:  HTML5:
char	character	Aligns the content in a cell to a character HTML4:  HTML5:
charoff	number	Sets the number of characters the content will be aligned from the character specified by the char attribute HTML4:  HTML5:
colspan	number	Specifies the number of columns a cell should span
headers	header cells'_id	Specifies the table headers related to a cell
height	pixels %	Sets the height of a cell HTML4:  HTML5:
nowrap	nowrap	Specifies that the content inside a cell should not wrap HTML4:  HTML5:
rowspan	number	Sets the number of rows a cell should span
scope	col colgroup row rowgroup	Specifies if this cell provides header information for the rest of the row that contains it (row), or for the rest of the column (col), or for the rest of the row group that contains it (rowgroup), or for the rest of the column group that contains it
valign	top middle bottom baseline	Vertically aligns the content in a cell HTML4:  HTML5:
width	pixels %	Specifies the width of a cell HTML4:  HTML5:

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body 1.1</td>
      <td>Body 1.2</td>
    </tr>
    <tr>
      <td>Body 2.1</td>
      <td>Body 2.2</td>
    </tr>
  </tbody>
</table>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset

Miscellaneous Information

Defined In:	HTML 2
Empty Tag:	No

Tag Description

The <tr> tag is used to define a row in an HTML table. A <tr> element contains one or more <th> or <td> elements.

This tag has the form:

<tr>
</tr>

HTML5 and HTML4.01 Differences

None of the HTML4.01 attributes are supported in HTML5.

Attributes

Attribute	Value	Description
align	left right center justify char	Aligns the content in a table row HTML4:  HTML5:
bgcolor	rgb(x,x,x) #xxxxxx colorname	Specifies a background color for a table row HTML4:  HTML5:
char	character	Aligns the content in a table row to a character HTML4:  HTML5:
charoff	number	Sets the number of characters the content will be aligned from the character specified by the char attribute HTML4:  HTML5:
valign	top middle bottom baseline	Vertically aligns the content in a table row HTML4:  HTML5:

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body 1.1</td>
      <td>Body 1.2</td>
    </tr>
    <tr>
      <td>Body 2.1</td>
      <td>Body 2.2</td>
    </tr>
  </tbody>
</table>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset

Miscellaneous Information

Defined In:	HTML 3.2
Empty Tag:	No

Tag Description

The <tfoot> tag is used to group the footer content in an HTML table.

The <tbody> element should be used in conjunction with the <thead> and <tfoot> elements.

This tag has the form:

<tfoot>
</tfoot>

Note: <tfoot> element must appear before <tbody> element within a table.

HTML5 and HTML4.01 Differences

None.

Attributes

Attribute	Value	Description
align	left right center justify char	Aligns the content in a table row HTML4:  HTML5:
char	character	Aligns the content inside the tfoot element to a character HTML4:  HTML5:
charoff	number	Sets the number of characters the content inside the tfoot element will be aligned from the character specified by the char attribute HTML4:  HTML5:
valign	top middle bottom baseline	Vertical aligns the content inside the tfoot element HTML4:  HTML5:

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body 1.1</td>
      <td>Body 1.2</td>
    </tr>
    <tr>
      <td>Body 2.1</td>
      <td>Body 2.2</td>
    </tr>
  </tbody>
</table>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset

Miscellaneous Information

Defined In:	HTML4
Empty Tag:	No

Tag Description

The <thead> tag is used to group the header content in an HTML table.

The <thead> element should be used in conjunction with the <tbody> and <tfoot> elements.

This tag has the form:

<thead>
</thead>

HTML5 and HTML4.01 Differences

None of the HTML4.01 attributes are supported in HTML5.

Attributes

Attribute	Value	Description
align	left right center justify char	Aligns the content in a table row HTML4:  HTML5:
char	character	Aligns the content in a table row to a character HTML4:  HTML5:
charoff	number	Sets the number of characters the content will be aligned from the character specified by the char attribute HTML4:  HTML5:
valign	top middle bottom baseline	Vertically aligns the content in a table row HTML4:  HTML5:

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body 1.1</td>
      <td>Body 1.2</td>
    </tr>
    <tr>
      <td>Body 2.1</td>
      <td>Body 2.2</td>
    </tr>
  </tbody>
</table>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset

Miscellaneous Information

Defined In:	HTML 3.2
Empty Tag:	No

Tag Description

The <tbody> tag is used to group the body content in an HTML table.

The <tbody> element should be used in conjunction with the <thead> and <tfoot> elements.

This tag has the form:

<tbody>
</tbody>

HTML5 and HTML4.01 Differences

None of the HTML4.01 attributes are supported in HTML5.

Attributes

Attribute	Value	Description
align	left right center justify char	Aligns the content in a table row HTML4:  HTML5:
char	character	Aligns the content inside the tbody element to a character HTML4:  HTML5:
charoff	number	Sets the number of characters the content inside the tbody element will be aligned from the character specified by the char attribute HTML4:  HTML5:
valign	top middle bottom baseline	Vertical aligns the content inside the tbody element HTML4:  HTML5:

Global Attributes

This tag also supports the HTML Global Attributes.

Event Attributes

This tag also supports the HTML Event Attributes.

Examples

The following example shows the basic use of this tag:

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body 1.1</td>
      <td>Body 1.2</td>
    </tr>
    <tr>
      <td>Body 2.1</td>
      <td>Body 2.2</td>
    </tr>
  </tbody>
</table>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera

Doctype Declaration Support

The following table lists the doctype declarations this element may appear in:

HTML4.01 / XHTML1.0			XHTML 1.1	HTML 5
Traditional	Strict	Frameset

Miscellaneous Information

Defined In:	HTML4
Empty Tag:	No