Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!

The HTML Table Element (<table>) represents tabular data - i.e., information expressed via a two dimensional data table.

Note: Prior to the creation of CSS, HTML <table> elements were often used as a method for page layout. This usage has been discouraged since HTML 4. However, HTML emails are an exception where tables are still commonly used for layout purposes. The reason for this is poor CSS support in popular email clients.

Usage context

Content categories Flow content
Permitted content
In this order:
  1. an optional <caption> element,
  2. zero or more <colgroup> elements,
  3. an optional <thead> element,
  4. an optional <tfoot> element, either before or after one of the following:
    • zero or more <tbody> elements
    • one or more <tr> elements
Tag omission None, both start and end tag are mandatory
Permitted parent elements Any element that accepts flow content
Normative document HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

Attributes

This element includes global attributes. The following attributes listed on this page are now deprecated.

align
This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:
  • left: the table is displayed on the left side of the document;
  • center: the table is displayed in the center of the document;
  • right: the table is displayed on the right side of the document.
Usage Note
  • Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS.  Set margin-left and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute.
  • Prior to Firefox 4, Firefox also supported the middle, absmiddle, and abscenter values as synonyms of center, in quirks mode only.
bgcolor
This attribute defines the background color of a table. It consists of a 6-digit hexadecimal code as defined in sRGB and is prefixed by '#'. This attribute may be used with one of sixteen predefined color strings :
  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"
Usage note: Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. Use the background-color property  in CSS to create an effect that is similar to the bgcolor attribute.
border
This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the frame attribute is set to void.
Usage note: Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. To create an effect similar to the border attribute, the border, border-color, border-width and border-style CSS properties  should be used.
cellpadding
This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).
Usage note: Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. To create an effect similar to the cellpadding attribute, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> element.
cellspacing
This attribute defines the size of the space between two cells in a percentage value or pixels,. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.
Usage note: Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. To create an effect similar to the cellspacing attribute, apply the border-spacing property to the <table> element. Border-spacing does not have any effect if border-collapse is set to collapse.
frame
This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values:
  above   below
  hsides   vsides
  lhs   rhs
  border   box
  void
Usage note: Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. To create an effect similar to the frame attribute, use the border-style and border-width properties.
rules
This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
  • none, which indicates that no rules will be displayed; it is the default value;
  • groups, which will cause the rules to be displayed between row groups (defined by the <thead>, <tbody> and <tfoot> elements) and between column groups (defined by the <col> and <colgroup> elements) only;
  • rows, which will cause the rules to be displayed between rows;
  • columns, which will cause the rules to be displayed between columns;
  • all, which wil cause the rules to be displayed between rows and columns.
Note:
  • The styling of the rules is browser-dependant and cannot be modified.
  • Do not use this attribute, as it has been deprecated. The rules should be defined and styled using CSS. Apply the border property to the appropriate<thead>, <tbody>, <tfoot>, <col> or <colgroup> elements.
summary
This attribute defines an alternative text that summarizes the content of the table. Typically, it allows visually impaired people who are browsing the web with a Braille screen, to acquire information about the table. If the information added by this attribute is also useful to people who are not visually impaired, consider using the <caption> instead. The summary attribute is not mandatory and may be omitted when a <caption> element fulfills its role.
Usage Note: Do not use this attribute, as it has been deprecated. Instead, choose one of these methods to add a description of a table:
  • Use prose around the table (this method is less semantic).
  • Add a description in the table's <caption> element.
  • Add a description in a <details> element, inside the table's <caption> element.
  • Include the <table> element in a <figure> element and add the description in prose next to it.
  • Include the <table> element in a <figure> element and add the description in prose inside a <figcaption> element.
  • Adjust the table so that a description is not needed (e.g. use <th> and <thead> elements).
width
This attribute defines the width of the table. The width may be defined by pixels or a percentage value. A percentage value will be defined by the width of the container in which the table is placed.
Usage Note: Do not use this attribute, as it has been deprecated. The rules should be defined and styled using CSS. Use the width property instead.

DOM interface

This element implements the HTMLTableElement interface.

Examples

Simple Table

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

More Examples

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0[1] 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0[1] 6.0 1.0

[1] There is an Internet Explorer 9 rendering bug involving <table> and :hover; see the "Browser compatibility" section of the :hover article for details.

See also