HTMLTableElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Learn more
See full compatibility

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

EventTarget Node Element HTMLElement HTMLTableElement

Instance properties

Inherits properties from its parent, HTMLElement.

HTMLTableElement.caption: An HTMLTableCaptionElement representing the first <caption> element child of the given <table>, or null if no such element exists. This property can be assigned, which causes the existing first <caption> element child, if any, to be removed, and the given value, if it is not null, to be inserted as the first child. If the assigned value is not an HTMLTableCaptionElement or null, a TypeError is thrown.
HTMLTableElement.tHead: An HTMLTableSectionElement representing the first <thead> element child of the given <table>, or null if no such element exists. This property can be assigned, which causes the existing first <thead> element child, if any, to be removed, and the given value, if it is not null, to be inserted immediately before the first element child that's neither a <caption> nor a <colgroup>, or as the last child if there is no such element. If the assigned value is not an HTMLTableSectionElement or null, a TypeError is thrown; otherwise, if it is not a <thead> element or null, a HierarchyRequestError DOMException is thrown.
HTMLTableElement.tFoot: An HTMLTableSectionElement representing the first <tfoot> element child of the given <table>, or null if no such element exists. This property can be assigned, which causes the existing first <tfoot> element child, if any, to be removed, and the given value, if it is not null, to be inserted as the last child. If the assigned value is not an HTMLTableSectionElement or null, a TypeError is thrown; otherwise, if it is not a <tfoot> element or null, a HierarchyRequestError DOMException is thrown.
HTMLTableElement.rows Read only: Returns a live HTMLCollection of all <tr> elements that are a child of the given <table> element, or a child of one of the table's <thead>, <tbody>, and <tfoot> children. The members of the <thead> appear first, followed by members of the <tbody> and the table itself, and members of the <tfoot> come last, sorted by tree order within each group. The returned object is automatically updated when the HTMLTableElement changes.
HTMLTableElement.tBodies Read only: Returns a live HTMLCollection of all <tbody> element children of the given <table>. The returned object is automatically updated when the HTMLTableElement changes.

Obsolete Properties

Warning: The following properties are obsolete. You should avoid using them.

HTMLTableElement.align: A string containing an enumerated value reflecting the align attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are "left", "right", and "center".
HTMLTableElement.bgColor: A string containing the background color of the cells. It reflects the obsolete bgColor attribute.
HTMLTableElement.border: A string containing the width in pixels of the border of the table. It reflects the obsolete border attribute.
HTMLTableElement.cellPadding: A string containing the width in pixels of the horizontal and vertical space between cell content and cell borders. It reflects the obsolete cellpadding attribute.
HTMLTableElement.cellSpacing: A string containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete cellspacing attribute.
HTMLTableElement.frame: A string containing the type of the external borders of the table. It reflects the obsolete frame attribute and can take one of the following values: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box", or "border".
HTMLTableElement.rules: A string containing the type of the internal borders of the table. It reflects the obsolete rules attribute and can take one of the following values: "none", "groups", "rows", "cols", or "all".
HTMLTableElement.summary: A string containing a description of the purpose or the structure of the table. It reflects the obsolete summary attribute.
HTMLTableElement.width: A string containing the length in pixels or in percentage of the desired width of the entire table. It reflects the obsolete width attribute.

Instance methods

Inherits methods from its parent, HTMLElement.

HTMLTableElement.createTHead(): Creates a <thead> element, inserts it before the first element child of the given <table> that's neither a <caption> nor a <colgroup>, or as the last child if no such insertion location is found, and returns it. If the table already has a <thead> element child, this method returns the first such child without creating one.
HTMLTableElement.deleteTHead(): Removes the first <thead> element child from a given <table>, if any.
HTMLTableElement.createTFoot(): Creates a <tfoot> element, inserts it as the last child of the given <table>, and returns it. If the table already has a <tfoot> element child, this method returns the first such child without creating one.
HTMLTableElement.deleteTFoot(): Removes the first <tfoot> element child from a given <table>, if any.
HTMLTableElement.createTBody(): Creates a <tbody> element, inserts it immediately after the last <tbody> element child of the given <table>, or as the last child if there is no such element, and returns it.
HTMLTableElement.createCaption(): Creates a <caption> element, inserts it as the first child of the given <table>, and returns it. If the table already has a <caption> element child, this method returns the first such child without creating one.
HTMLTableElement.deleteCaption(): Removes the first <caption> element child from a given <table>, if any.
HTMLTableElement.insertRow(): Creates a <tr> element, inserts it at the specified position in the rows collection, and returns it. If the rows collection is empty and the table also has no <tbody> elements, a <tbody> element is first created and inserted.
HTMLTableElement.deleteRow(): Removes a specific row (<tr>) from a given <table>. If index is -1, the last row is removed.

Examples

Using the DOM Table Interface

The HTMLTableElement interface provides some convenience methods for creating and manipulating tables. Two frequently used methods are HTMLTableElement.insertRow and HTMLTableRowElement.insertCell.

To add a row and some cells to an existing table:

html

<table id="table0">
  <tbody>
    <tr>
      <td>Row 0 Cell 0</td>
      <td>Row 0 Cell 1</td>
    </tr>
  </tbody>
</table>

const table = document.getElementById("table0");
const row = table.insertRow(-1);

for (let i = 0; i < 2; i++) {
  const cell = row.insertCell(-1);
  const text = `Row ${row.rowIndex} Cell ${i}`;
  cell.appendChild(document.createTextNode(text));
}