<table>

  • Revision slug: HTML/Element/table
  • Revision title: table
  • Revision id: 57576
  • Created:
  • Creator: hobophobe
  • Is current revision? No
  • Comment Fix indentation of example.; no changes

Revision Content

The HTML Table Element (<table>) represents data in two dimensions or more.

Usage note: before the creation of CSS, HTML {{ HTMLElement("table") }} where often used as canvas for the styling of the page. This usage has been obsoleted since HTML4 and the {{ HTMLElement("table") }} element must not be used for styling purpose.

Usage context

Content categories Flow content
Permitted content
In this order:
  • an optional {{ HTMLElement("caption") }} element,
  • zero or more {{ HTMLElement("colgroup") }} elements,
  • an optional {{ HTMLElement("thead") }} element,
  • one of the two alternatives:
    • one {{ HTMLElement("tfoot") }} element, followed by:
      • zero or more {{ HTMLElement("tbody") }} elements,
      • or one or more {{ HTMLElement("tr") }} elements,
    • a second alternative followed by an optional {{ HTMLElement("tfoot") }} element:
      • either zero or more {{ HTMLElement("tbody") }} elements,
      • or one or more {{ HTMLElement("tr") }} elements
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts flow content
Normative document HTML5, section 4.9.1({{ HTMLVersionInline("4") }} : HTML4.01, section 11.2.1)

Attributes

Like all other HTML elements, this element supports the global attributes.

{{ htmlattrdef("align") }}{{ Deprecated_inline() }}
 This enumerated attribute indicates how the table must be aligned in regard of the containing document. It may have the following values:
  • left, meaning that the table is to be displayed to the left of the document;
  • center, meaning that the table is to be displayed centered in the document;
  • right, meaning that the table is to be displayed to the right of the document.
Usage note: Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using CSS. To give a similar effect than the align attribute, the CSS properties {{ cssxref("text-align") }} and {{ cssxref("vertical-align") }} should be used.
{{ htmlattrdef("bgcolor }}"){{ Deprecated_inline() }}
This attribute defines the background color of the table and its content. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'. One of the sixteen predefined color strings may be used:
  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 {{ HTMLElement("table") }} element should be styled using CSS. To give a similar effect than the bgcolor attribute, the CSS property {{ cssxref("background-color") }} should be used.
{{ htmlattrdef("border }}"){{ Deprecated_inline() }}
This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, it implies that the {{ htmlattrxref("frame", "table") }} attribute is set to void.
Usage note: Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using CSS. To give a similar effect than the border attribute, the CSS properties {{ cssxref("border") }}, {{ cssxref("border-color") }}, {{ cssxref("border-width") }} and {{ cssxref("border-style") }} should be used.
{{ htmlattrdef("cellpadding }}"){{ Deprecated_inline() }}
This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all fourth side, if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. 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 {{ HTMLElement("table") }} element should be styled using CSS. To give a similar effect than the border attribute, use the CSS property {{ cssxref("border-collapse") }} with the value collapse on the  {{ HTMLElement("table") }} element itself, and the property {{ cssxref("padding") }} on the {{ HTMLElement("td") }}.
{{ htmlattrdef("cellspacing }}"){{ Deprecated_inline() }}
This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), 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 {{ HTMLElement("table") }} element should be styled using CSS. To give a similar effect than the border attribute, use the CSS property {{ cssxref("border-collapse") }} with the value collapse on the  {{ HTMLElement("table") }} element itself, and the property {{ cssxref("margin") }} on the {{ HTMLElement("td") }} element.
{{ htmlattrdef("frame }}"){{ Deprecated_inline() }}
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 {{ HTMLElement("table") }} element should be styled using CSS. To give a similar effect than the frame attribute, use the CSS properties {{ cssxref("border-style") }} and {{ cssxref("border-width") }}.
{{ htmlattrdef("rules }}"){{ Deprecated_inline() }}
This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
  • none, which indicates the no rules will be displayed; it is the default value;
  • groups, which will make the rules to be displayed between row groups (defined by the {{ HTMLElement("thead") }}, {{ HTMLElement("tbody") }} and {{ HTMLElement("tfoot") }} elements) and between column groups (defined by the {{ HTMLElement("col") }} and {{ HTMLElement("colgroup") }} elements) only;
  • rows, which will make the rules to be displayed between rows;
  • columns, which will make the rules to be displayed between columns;
  • all, which wil make 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. use the CSS property {{ cssxref("border") }} on the adequate {{ HTMLElement("thead") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("col") }} or {{ HTMLElement("colgroup") }} elements.
{{ htmlattrdef("summary }}")
This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the {{ HTMLElement("caption") }} instead. The summary attribute is not mandatory and may be omitted when a {{ HTMLElement("caption") }} element fulfills its role.
{{ htmlattrdef("width"){{ Deprecated_inline() }}
This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use.
Usage Note: Do not use this attribute, as it has been deprecated: the rules should be defined and styled using CSS. use the CSS property {{ cssxref("width") }} 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>

<!-- Simple table with header -->
<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>

<!-- Table with thead, tfoot, and tbody -->
<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>

<!-- Table with colgroup -->
<table>
  <colgroup span="4" class="columns"></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>

<!-- Table with colgroup and col -->
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" 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>

<!-- Simple table with caption -->
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

Result

John Doe
Jane Doe
First name Last name
John Doe
Jane Doe
Header content 1 Header content 2
Footer content 1 Footer content 2
Body content 1 Body content 2
Countries Capitals Population Language
USA Washington D.C. 309 million English
Sweden Stockholm 9 million Swedish
Lime Lemon Orange
Green Yellow Orange
Awesome caption
Awesome data

See also

  • Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};
  • CSS properties that may be specially useful to style the <table> element: 
    • {{ cssxref("width") }} to control the width of the table;
    • {{ cssxref("border") }}, {{ cssxref("border-style") }}, {{ cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-collapse") }}, {{ cssxref("border-spacing") }} to control the aspect of cell borders, rules and frame;
    • {{ cssxref("margin") }} and {{ cssxref("padding") }} to style the individual cell content;
    • {{ cssxref("text-align") }} and {{ cssxref("vertical-align") }} to define alignment of text and cell content.

Revision Source

<p>The <em>HTML Table Element </em>(<span style="font-family: Courier New;">&lt;table&gt;</span>) represents data in two dimensions or more.</p>
<div class="note"><strong>Usage note: </strong>before the creation of <a href="/en/CSS" title="en/CSS">CSS</a>, HTML {{ HTMLElement("table") }} where often used as canvas for the styling of the page. This usage has been obsoleted since HTML4 and the {{ HTMLElement("table") }} element <strong>must not</strong> be used for styling purpose.</div>
<h2>Usage context</h2>
<table class="fullwidth-table" style="width: 1125px; height: 117px;"> <tbody> <tr> <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td> <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Flow content</a></td> </tr> <tr> <td>Permitted content</td> <td> <div class="content-models"> <div id="table-mdls">In this order: <ul> <li>an optional {{ HTMLElement("caption") }} element,</li> <li>zero or more {{ HTMLElement("colgroup") }} elements,</li> <li>an optional {{ HTMLElement("thead") }} element,</li> <li>one of the two alternatives:<br> <ul> <li>one {{ HTMLElement("tfoot") }} element, followed by: <ul> <li>zero or more {{ HTMLElement("tbody") }} elements,</li> <li>or one or more {{ HTMLElement("tr") }} elements,</li> </ul> </li> <li>a second alternative followed by an optional {{ HTMLElement("tfoot") }} element: <ul> <li>either zero or more {{ HTMLElement("tbody") }} elements,</li> <li>or one or more {{ HTMLElement("tr") }} elements</li> </ul> </li> </ul> </li> </ul> </div> </div> </td> </tr> <tr> <td>Tag omission</td> <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts flow content</td> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">HTML5, section 4.9.1</a>({{ HTMLVersionInline("4") }} : <a class=" external" href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TABLE">HTML4.01, section 11.2.1</a>)</td> </tr> </tbody>
</table>
<h3>Attributes</h3>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl> <dt>{{ htmlattrdef("align") }}{{ Deprecated_inline() }}</dt> <dd> This enumerated attribute indicates how the table must be aligned in regard of the containing document. It may have the following values: <ul> <li><span style="font-family: Courier New;">left</span>, meaning that the table is to be displayed to the left of the document;</li> <li><span style="font-family: Courier New;">center</span>, meaning that the table is to be displayed centered in the document;</li> <li><span style="font-family: Courier New;">right</span>, meaning that the table is to be displayed to the right of the document.</li> </ul> <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">align</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> properties {{ cssxref("text-align") }} and {{ cssxref("vertical-align") }} should be used.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("<span><span class="attribute">bgcolor }}</span></span></span>")</span>{{ Deprecated_inline() }}</dt> <dd>This attribute defines the background color of the table and its content. It is one of the 6-digit hexadecimal code as defined in <a class=" external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: <table align="center" border="0" cellpadding="0" cellspacing="10" summary="Table of color names and their sRGB values" width="80%"> <tbody> <tr> <td style="background-color:black;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">black</span> = "#000000"</td> <td style="background-color:green;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">green</span> = "#008000"</td> </tr> <tr> <td style="background-color:silver;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">silver</span> = "#C0C0C0"</td> <td style="background-color:lime;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">lime</span> = "#00FF00"</td> </tr> <tr> <td style="background-color:gray;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">gray</span> = "#808080"</td> <td style="background-color:olive;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">olive</span> = "#808000"</td> </tr> <tr> <td style="background-color:white;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">white</span> = "#FFFFFF"</td> <td style="background-color:yellow;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">yellow</span> = "#FFFF00"</td> </tr> <tr> <td style="background-color:maroon;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">maroon</span> = "#800000"</td> <td style="background-color:navy;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">navy</span> = "#000080"</td> </tr> <tr> <td style="background-color:red;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">red</span> = "#FF0000"</td> <td style="background-color:blue;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">blue</span> = "#0000FF"</td> </tr> <tr> <td style="background-color:purple;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">purple</span> = "#800080"</td> <td style="background-color:teal;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">teal</span> = "#008080"</td> </tr> <tr> <td style="background-color:fuchsia;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">fuchsia</span> = "#FF00FF"</td> <td style="background-color:aqua;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">aqua</span> = "#00FFFF"</td> </tr> </tbody> </table> <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">bgcolor</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }} should be used.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("<span><span class="attribute">border }}</span></span></span>")</span>{{ Deprecated_inline() }}</dt> <dd>This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to <span style="font-family: Courier New;">0</span>, it implies that the {{ htmlattrxref("frame", "table") }} attribute is set to <span style="font-family: Courier New;">void</span>. <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">border</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> properties {{ cssxref("border") }}, {{ cssxref("border-color") }}, {{ cssxref("border-width") }} and {{ cssxref("border-style") }} should be used.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("<span><span class="attribute">cellpadding }}</span></span></span>")</span>{{ Deprecated_inline() }}</dt> <dd>This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all fourth side, if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right). <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">border</span> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("border-collapse") }} with the value collapse on the  {{ HTMLElement("table") }} element itself, and the property {{ cssxref("padding") }} on the {{ HTMLElement("td") }}.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("<span><span class="attribute">cellspacing }}</span></span></span>")</span>{{ Deprecated_inline() }}</dt> <dd>This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), 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. <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">border</span> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("border-collapse") }} with the value collapse on the  {{ HTMLElement("table") }} element itself, and the property {{ cssxref("margin") }} on the {{ HTMLElement("td") }} element.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("<span><span class="attribute">frame }}</span></span></span>")</span>{{ Deprecated_inline() }}</dt> <dd>This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values: <table align="center" border="0" cellpadding="0" cellspacing="10" style="table-layout:fixed; width: 668px; height: 159px;" summary="Table of the frame attribute possible value and their effect"> <tbody> <tr> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:1px 0 0 0;border-color:black;border-style:solid none none none;"> </td> <td><span style="font-family: Courier New;">above</span></td> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:0 0 1px 0;border-color:black;border-style:none none solid none;"> </td> <td><span style="font-family: Courier New;">below</span></td> </tr> <tr> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:1px 0 1px 0;border-color:black;border-style:solid none solid none;"> </td> <td><span style="font-family: Courier New;">hsides</span></td> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:0 1px 0 1px;border-color:black;border-style:none solid none solid;"> </td> <td><span style="font-family: Courier New;">vsides</span></td> </tr> <tr> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:0 0 0 1px;border-color:black;border-style:none none none solid;"> </td> <td><span style="font-family: Courier New;">lhs</span></td> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:0 1px 0 0;border-color:black;border-style:none solid none none;"> </td> <td><span style="font-family: Courier New;">rhs</span></td> </tr> <tr> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">border</span></td> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:1px;border-color:black;border-style:solid;"> </td> <td><span style="font-family: Courier New;">box</span></td> </tr> <tr> <td style="background-color:#E0E0E0;width:24px;height:24px;border-width:0;border-color:black;border-style:none;"> </td> <td><span style="font-family: Courier New;">void</span></td> </tr> </tbody> </table> <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("table") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">frame</span> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> properties {{ cssxref("border-style") }} and {{ cssxref("border-width") }}.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("<span><span class="attribute">rules }}</span></span></span>")</span>{{ Deprecated_inline() }}</dt> <dd>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values: <ul> <li><span style="font-family: Courier New;">none</span>, which indicates the no rules will be displayed; it is the default value;</li> <li><span style="font-family: Courier New;">groups</span>, which will make the rules to be displayed between row groups (defined by the {{ HTMLElement("thead") }}, {{ HTMLElement("tbody") }} and {{ HTMLElement("tfoot") }} elements) and between column groups (defined by the {{ HTMLElement("col") }} and {{ HTMLElement("colgroup") }} elements) only;</li> <li><span style="font-family: Courier New;">rows</span>, which will make the rules to be displayed between rows;</li> <li><span style="font-family: Courier New;">columns</span>, which will make the rules to be displayed between columns;</li> <li><span style="font-family: Courier New;">all</span>, which wil make the rules to be displayed between rows and columns.</li> </ul> <div class="note"><strong>Note</strong>: <ul> <li>The styling of the rules is browser-dependant and cannot be modified.</li> <li>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en/CSS" title="en/CSS">CSS</a>. use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("border") }} on the adequate {{ HTMLElement("thead") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("col") }} or {{ HTMLElement("colgroup") }} elements.</li> </ul> </div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("<span><span class="attribute">summary }}</span></span></span>")</span></dt> <dd>This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the {{ HTMLElement("caption") }} instead. The summary attribute is not mandatory and may be omitted when a {{ HTMLElement("caption") }} element fulfills its role.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("width<span id="1284702147861S" style="display: none;"> }}</span>")</span>{{ Deprecated_inline() }}</dt> <dd>This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use. <div class="note"><strong>Usage Note: </strong>Do not use this attribute, as it has been deprecated: the rules should be defined and styled using <a href="/en/CSS" title="en/CSS">CSS</a>. use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("width") }} instead.</div> </dd>
</dl>
<h3>DOM interface</h3>
<p>This element implements the <code><a href="/en/DOM/HTMLTableElement" title="en/DOM/HTMLTableElement">HTMLTableElement</a></code> interface.</p>
<h3>Examples</h3>
<pre class="brush: html">&lt;!-- Simple table --&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Jane&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Simple table with header --&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;First name&lt;/th&gt;
    &lt;th&gt;Last name&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;John&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Jane&lt;/td&gt;
    &lt;td&gt;Doe&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Table with thead, tfoot, and tbody --&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Header content 1&lt;/th&gt;
      &lt;th&gt;Header content 2&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;Footer content 1&lt;/td&gt;
      &lt;td&gt;Footer content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Body content 1&lt;/td&gt;
      &lt;td&gt;Body content 2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;!-- Table with colgroup --&gt;
&lt;table&gt;
  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Countries&lt;/th&gt;
    &lt;th&gt;Capitals&lt;/th&gt;
    &lt;th&gt;Population&lt;/th&gt;
    &lt;th&gt;Language&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;USA&lt;/td&gt;
    &lt;td&gt;Washington D.C.&lt;/td&gt;
    &lt;td&gt;309 million&lt;/td&gt;
    &lt;td&gt;English&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Sweden&lt;/td&gt;
    &lt;td&gt;Stockholm&lt;/td&gt;
    &lt;td&gt;9 million&lt;/td&gt;
    &lt;td&gt;Swedish&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Table with colgroup and col --&gt;
&lt;table&gt;
  &lt;colgroup&gt;
    &lt;col class="column1"&gt;
    &lt;col class="columns2plus3" span="2"&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;Lime&lt;/th&gt;
    &lt;th&gt;Lemon&lt;/th&gt;
    &lt;th&gt;Orange&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Green&lt;/td&gt;
    &lt;td&gt;Yellow&lt;/td&gt;
    &lt;td&gt;Orange&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;!-- Simple table with caption --&gt;
&lt;table&gt;
  &lt;caption&gt;Awesome caption&lt;/caption&gt;
  &lt;tr&gt;
    &lt;td&gt;Awesome data&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</pre>
<h4>Result</h4>
<!-- Simple table -->
<table> <tbody> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody>
</table>
<!-- Simple table with header -->
<table> <tbody> <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> </tbody>
</table>
<!-- Table with thead, tfoot, and tbody -->
<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>
<!-- Table with colgroup -->
<table> <colgroup class="columns" span="4"> </colgroup><tbody> <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> </tbody>
</table>
<!-- Table with colgroup and col -->
<table> <colgroup> <col class="column1"> <col class="columns2plus3" span="2"> </colgroup> <tbody> <tr> <th>Lime</th> <th>Lemon</th> <th>Orange</th> </tr> <tr> <td>Green</td> <td>Yellow</td> <td>Orange</td> </tr> </tbody>
</table>
<!-- Simple table with caption -->
<table> <caption>Awesome caption</caption> <tbody> <tr> <td>Awesome data</td> </tr> </tbody>
</table>
<h3>See also</h3>
<ul> <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }};</li> <li>CSS properties that may be specially useful to style the <span style="font-family: Courier New;">&lt;table&gt;</span> element:  <ul> <li>{{ cssxref("width") }} to control the width of the table;</li> <li>{{ cssxref("border") }}, {{ cssxref("border-style") }}, {{ cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-collapse") }}, {{ cssxref("border-spacing") }} to control the aspect of cell borders, rules and frame;</li> <li>{{ cssxref("margin") }} and {{ cssxref("padding") }} to style the individual cell content;</li> <li>{{ cssxref("text-align") }} and {{ cssxref("vertical-align") }} to define alignment of text and cell content.</li> </ul> </li>
</ul>
Revert to this revision