mozilla

Revision 409973 of HTMLTableElement

  • Revision slug: Web/API/HTMLTableElement
  • Revision title: HTMLTableElement
  • Revision id: 409973
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ DomRef()}}

The HTMLTableElement interface provides special properties and methods (beyond the regular {{domxref("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.

Properties

{{domxref("HTMLTableElement.caption")}}
Is an {{domxref("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <caption>, a {{domxref("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <caption> that is a child of this element is removed from the tree, if any.
{{domxref("HTMLTableElement.tHead")}}
Is an {{domxref("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <thead>, a {{domxref("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <thead> that is a child of this element is removed from the tree, if any.
{{domxref("HTMLTableElement.tFoot")}}
Is an {{domxref("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <tfoot>, a {{domxref("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <tfoot> that is a child of this element is removed from the tree, if any.
{{domxref("HTMLTableElement.rows")}} {{readonlyInline}}
Returns a live {{domxref("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child or one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <thead> appear first, in tree order, and those members of a <tbody> last, also in tree order. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
{{domxref("HTMLTableElement.tBodies")}} {{readonlyInline}}
Returns a live {{domxref("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
{{domxref("HTMLTableElement.sortable")}} {{experimental_inline}}
Is a {{domxref("Boolean")}} value indicating if the user agent is allowed to provide sorting mechanism for the table, if it supports such a feature. This property reflects the {{htmlattrxref("sortable", "table")}} attribute.
{{domxref("HTMLTableElement.align")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing an enumerated value reflecting the {{htmlattrxref("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are "left", "right", and "center".
{{domxref("HTMLTableElement.bgColor")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing the background color of the cells. It reflects the obsolete {{htmlattrxref("bgColor", "table")}} attribute.
{{domxref("HTMLTableElement.border")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{htmlattrxref("border", "table")}} attribute.
{{domxref("HTMLTableElement.cellPadding")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{htmlattrxref("cellpadding", "table")}} attribute.
{{domxref("HTMLTableElement.cellSpacing")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{htmlattrxref("cellspacing", "table")}} attribute.
{{domxref("HTMLTableElement.frame")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{htmlattrxref("frame", "table")}} attribute and can take one of the following values: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box", or "border".
{{domxref("HTMLTableElement.rules")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{htmlattrxref("rules", "table")}} attribute and can take one of the following values: "none", "groups", "rows", "cols", or "all".
{{domxref("HTMLTableElement.summary")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{htmlattrxref("summary", "table")}} attribute.
{{domxref("HTMLTableElement.width")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{htmlattrxref("width", "table")}} attribute.

Methods

{{domxref("HTMLTableElement.createTHead()")}}
Returns the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, , or as the last child if there is no such element.
{{domxref("HTMLTableElement.deleteTHead()")}}
Removes the first {{HTMLElement("thead")}} that is a child of the element.
{{domxref("HTMLTableElement.createTFoot()")}}
Returns the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.
{{domxref("HTMLTableElement.deleteTFoot()")}}
Removes the first {{HTMLElement("tfoot")}} that is a child of the element.
{{domxref("HTMLTableElement.createCaption()")}}
createCaption creates a new caption for the table.
{{domxref("HTMLTableElement.deleteCaption()")}}
deleteCaption removes the table caption.
{{domxref("HTMLTableElement.insertRow()")}}
insertRow inserts a new row.
{{domxref("HTMLTableElement.deleteRow()")}}
deleteRow removes a row.

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', "tabular-data.html#the-table-element", "HTMLTableElement")}} {{Spec2('HTML WHATWG')}} optional -1 for indexRow + sortable + stopSorting()
{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}} {{Spec2('HTML5 W3C')}}  
{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}} {{Spec2('DOM2 HTML')}}  
{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}} {{Spec2('DOM1')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

  • The HTML element implementing this interface: {{HTMLElement("table")}}.

Revision Source

<div>
  {{ DomRef()}}</div>
<p>The <span class="external"><code>HTMLTableElement</code></span> interface provides special properties and methods (beyond the regular {{domxref("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.</p>
<h2 id="Properties" name="Properties">Properties</h2>
<dl>
  <dt>
    {{domxref("HTMLTableElement.caption")}}</dt>
  <dd>
    Is an {{domxref("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;caption&gt;</code>, a {{domxref("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <code>&lt;caption&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
  <dt>
    {{domxref("HTMLTableElement.tHead")}}</dt>
  <dd>
    Is an {{domxref("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;thead&gt;</code>, a {{domxref("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <code>&lt;thead&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
  <dt>
    {{domxref("HTMLTableElement.tFoot")}}</dt>
  <dd>
    Is an {{domxref("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or <code>null</code> if none is found. When set, if the object doesn't represent a <code>&lt;tfoot&gt;</code>, a {{domxref("DOMException")}} with the <code>HierarchyRequestError</code> name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <code>&lt;tfoot&gt;</code> that is a child of this element is removed from the tree, if any.</dd>
  <dt>
    {{domxref("HTMLTableElement.rows")}} {{readonlyInline}}</dt>
  <dd>
    Returns a live {{domxref("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child or one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <code>&lt;thead&gt;</code> appear first, in tree order, and those members of a <code>&lt;tbody&gt;</code> last, also in tree order. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd>
  <dt>
    {{domxref("HTMLTableElement.tBodies")}} {{readonlyInline}}</dt>
  <dd>
    Returns a live {{domxref("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The <code>HTMLCollection</code> is live and is automatically updated when the <code>HTMLTableElement</code> changes.</dd>
  <dt>
    {{domxref("HTMLTableElement.sortable")}} {{experimental_inline}}</dt>
  <dd>
    Is a {{domxref("Boolean")}} value indicating if the user agent is allowed to provide sorting mechanism for the table, if it supports such a feature. This property reflects the {{htmlattrxref("sortable", "table")}} attribute.</dd>
  <dt>
    {{domxref("HTMLTableElement.align")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing an enumerated value reflecting the {{htmlattrxref("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.</dd>
  <dt>
    {{domxref("HTMLTableElement.bgColor")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing the background color of the cells. It reflects the obsolete {{htmlattrxref("bgColor", "table")}} attribute.</dd>
  <dt>
    {{domxref("HTMLTableElement.border")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{htmlattrxref("border", "table")}} attribute.</dd>
  <dt>
    {{domxref("HTMLTableElement.cellPadding")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{htmlattrxref("cellpadding", "table")}} attribute.</dd>
  <dt>
    {{domxref("HTMLTableElement.cellSpacing")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{htmlattrxref("cellspacing", "table")}} attribute.</dd>
  <dt>
    {{domxref("HTMLTableElement.frame")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{htmlattrxref("frame", "table")}} attribute and can take one of the following values: <code>"void"</code>, <code>"above"</code>, <code>"below"</code>, <code>"hsides"</code>, <code>"vsides"</code>, <code>"lhs"</code>, <code>"rhs"</code>, <code>"box"</code>, or <code>"border"</code>.</dd>
  <dt>
    {{domxref("HTMLTableElement.rules")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{htmlattrxref("rules", "table")}} attribute and can take one of the following values: <code>"none"</code>, <code>"groups"</code>, <code>"rows"</code>, <code>"cols"</code>, or <code>"all"</code>.</dd>
  <dt>
    {{domxref("HTMLTableElement.summary")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{htmlattrxref("summary", "table")}} attribute.</dd>
  <dt>
    {{domxref("HTMLTableElement.width")}} {{obsolete_inline}}</dt>
  <dd>
    Is a {{domxref("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{htmlattrxref("width", "table")}} attribute.</dd>
</dl>
<h2 id="Methods" name="Methods">Methods</h2>
<dl>
  <dt>
    {{domxref("HTMLTableElement.createTHead()")}}</dt>
  <dd>
    Returns the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, , or as the last child if there is no such element.</dd>
  <dt>
    {{domxref("HTMLTableElement.deleteTHead()")}}</dt>
  <dd>
    Removes the first {{HTMLElement("thead")}} that is a child of the element.</dd>
  <dt>
    {{domxref("HTMLTableElement.createTFoot()")}}</dt>
  <dd>
    Returns the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.</dd>
  <dt>
    {{domxref("HTMLTableElement.deleteTFoot()")}}</dt>
  <dd>
    Removes the first {{HTMLElement("tfoot")}} that is a child of the element.</dd>
  <dt>
    {{domxref("HTMLTableElement.createCaption()")}}</dt>
  <dd>
    <b>createCaption</b> creates a new caption for the table.</dd>
  <dt>
    {{domxref("HTMLTableElement.deleteCaption()")}}</dt>
  <dd>
    <b>deleteCaption</b> removes the table caption.</dd>
  <dt>
    {{domxref("HTMLTableElement.insertRow()")}}</dt>
  <dd>
    <b>insertRow</b> inserts a new row.</dd>
  <dt>
    {{domxref("HTMLTableElement.deleteRow()")}}</dt>
  <dd>
    <b>deleteRow</b> removes a row.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
    <tr>
      <td>{{SpecName('HTML WHATWG', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>optional -1 for indexRow + sortable + stopSorting()</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td>
      <td>{{Spec2('DOM2 HTML')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td>
      <td>{{Spec2('DOM1')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop(1.0)}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile(1.0)}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>The HTML element implementing this interface: {{HTMLElement("table")}}.</li>
</ul>
<p><span id="cke_bm_222C" style="display: none;">&nbsp;</span></p>
Revert to this revision