---
title: HTMLTableElement
slug: Web/API/HTMLTableElement
tags:
  - API
  - HTML DOM
  - Interface
  - NeedsTranslation
  - Reference
  - TopicStub
translation_of: Web/API/HTMLTableElement
---
<p>{{APIRef("HTML DOM")}}</p>

<p>The <strong><code>HTMLTableElement</code></strong> 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>

<p>{{InheritanceDiagram(600, 120)}}</p>

<h2 id="Properties">Properties</h2>

<p><em>Inherits properties from its parent, {{DOMxRef("HTMLElement")}}.</em></p>

<dl>
 <dt>{{DOMxRef("HTMLTableElement.caption")}}</dt>
 <dd>Is a {{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 a {{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 a {{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 of 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>
</dl>

<h3 id="Obsolete_Properties">Obsolete Properties</h3>

<div class="blockIndicator warning">
<p><strong>Warning:</strong> The following properties are obsolete.  You should avoid using them.</p>
</div>

<details>
<dl>
 <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>
</details>

<h2 id="Methods">Methods</h2>

<p><em>Inherits methods from its parent, {{DOMxRef("HTMLElement")}}</em>.</p>

<dl>
 <dt>{{DOMxRef("HTMLTableElement.createTHead()")}}</dt>
 <dd>Returns an {{DOMxRef("HTMLElement")}} representing 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 an {{DOMxRef("HTMLElement")}} representing 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>Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the {{HTMLElement("table")}} element.</dd>
 <dt>{{DOMxRef("HTMLTableElement.deleteCaption()")}}</dt>
 <dd>Removes the first {{HTMLElement("caption")}} that is a child of the element.</dd>
 <dt>{{DOMxRef("HTMLTableElement.insertRow()")}}</dt>
 <dd>Returns an {{DOMxRef("HTMLTableRowElement")}} representing a new row of the table. It inserts it in the rows collection immediately before the {{HTMLElement("tr")}} element at the given <code>index</code> position. If necessary a {{HTMLElement("tbody")}} is created. If the <code>index</code> is <code>-1</code>, the new row is appended to the collection. If the <code>index</code> is smaller than <code>-1</code> or greater than the number of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd>
 <dt>{{DOMxRef("HTMLTableElement.deleteRow()")}}</dt>
 <dd>Removes the row corresponding to the <code>index</code> given in parameter. If the <code>index</code> value is <code>-1</code> the last row is removed; if it smaller than <code>-1</code> or greater than the amount of rows in the collection, a {{DOMxRef("DOMException")}} with the value <code>IndexSizeError</code> is raised.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Added the <code>sortable</code> property and the <code>stopSorting()</code> method.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Added the <code>createTBody()</code> method.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>Defined when <code>caption</code>, <code>tHead</code>, <code>tFoot</code>, <code>insertRow()</code>, and <code>deleteRow()</code> raise exceptions.</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>



<p>{{Compat("api.HTMLTableElement")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The HTML element implementing this interface: {{HTMLElement("table")}}.</li>
</ul>