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.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/HTMLTableElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLTableElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Properties
Inherits properties from its parent, HTMLElement
.
HTMLTableElement.caption
- Is a
HTMLTableCaptionElement
representing the first<caption>
that is a child of the element, ornull
if none is found. When set, if the object doesn't represent a<caption>
, aDOMException
with theHierarchyRequestError
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. HTMLTableElement.tHead
- Is a
HTMLTableSectionElement
representing the first<thead>
that is a child of the element, ornull
if none is found. When set, if the object doesn't represent a<thead>
, aDOMException
with theHierarchyRequestError
name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a<caption>
, nor a<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. HTMLTableElement.tFoot
- Is a
HTMLTableSectionElement
representing the first<tfoot>
that is a child of the element, ornull
if none is found. When set, if the object doesn't represent a<tfoot>
, aDOMException
with theHierarchyRequestError
name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a<caption>
, a<colgroup>
, nor a<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. HTMLTableElement.rows
Read only- Returns a live
HTMLCollection
containing all the rows of the element, that is all<tr>
that are a child of the element, or a child of one of its<thead>
,<tbody>
and<tfoot>
children. The rows members of a<thead>
appear first, in tree order, and those members of a<tbody>
last, also in tree order. TheHTMLCollection
is live and is automatically updated when theHTMLTableElement
changes. HTMLTableElement.tBodies
Read only- Returns a live
HTMLCollection
containing all the<tbody>
of the element. TheHTMLCollection
is live and is automatically updated when theHTMLTableElement
changes.
Obsolete Properties
Warning: The following properties are obsolete. You should avoid using them.
HTMLTableElement.align
- Is a
DOMString
containing an enumerated value reflecting thealign
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
- Is a
DOMString
containing the background color of the cells. It reflects the obsoletebgcolor
attribute. HTMLTableElement.border
- Is a
DOMString
containing the width in pixels of the border of the table. It reflects the obsoleteborder
attribute. HTMLTableElement.cellPadding
- Is a
DOMString
containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsoletecellpadding
attribute. HTMLTableElement.cellSpacing
- Is a
DOMString
containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsoletecellspacing
attribute. HTMLTableElement.frame
- Is a
DOMString
containing the type of the external borders of the table. It reflects the obsoleteframe
attribute and can take one of the following values:"void"
,"above"
,"below"
,"hsides"
,"vsides"
,"lhs"
,"rhs"
,"box"
, or"border"
. HTMLTableElement.rules
- Is a
DOMString
containing the type of the internal borders of the table. It reflects the obsoleterules
attribute and can take one of the following values:"none"
,"groups"
,"rows"
,"cols"
, or"all"
. HTMLTableElement.summary
- Is a
DOMString
containing a description of the purpose or the structure of the table. It reflects the obsoletesummary
attribute. HTMLTableElement.width
- Is a
DOMString
containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsoletewidth
attribute.
Methods
Inherits methods from its parent, HTMLElement
.
HTMLTableElement.createTHead()
- Returns an
HTMLElement
representing the first<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<caption>
, nor a<colgroup>
, or as the last child if there is no such element. HTMLTableElement.deleteTHead()
- Removes the first
<thead>
that is a child of the element. HTMLTableElement.createTFoot()
- Returns an
HTMLElement
representing the first<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<caption>
, a<colgroup>
, nor a<thead>
, or as the last child if there is no such element. HTMLTableElement.deleteTFoot()
- Removes the first
<tfoot>
that is a child of the element. HTMLTableElement.createCaption()
- Returns an
HTMLElement
representing the first<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<table>
element. HTMLTableElement.deleteCaption()
- Removes the first
<caption>
that is a child of the element. HTMLTableElement.insertRow()
- Returns an
HTMLTableRowElement
representing a new row of the table. It inserts it in the rows collection immediately before the<tr>
element at the givenindex
position. If necessary a<tbody>
is created. If theindex
is-1
, the new row is appended to the collection. If theindex
is smaller than-1
or greater than the number of rows in the collection, aDOMException
with the valueIndexSizeError
is raised. HTMLTableElement.deleteRow()
- Removes the row corresponding to the
index
given in parameter. If theindex
value is-1
the last row is removed; if it smaller than-1
or greater than the amount of rows in the collection, aDOMException
with the valueIndexSizeError
is raised.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'HTMLTableElement' in that specification. |
Living Standard | Added the sortable property and the stopSorting() method. |
HTML5 The definition of 'HTMLTableElement' in that specification. |
Recommendation | Added the createTBody() method. |
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLTableElement' in that specification. |
Obsolete | Defined when caption , tHead , tFoot , insertRow() , and deleteRow() raise exceptions. |
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLTableElement' in that specification. |
Obsolete | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
HTMLTableElement | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
align | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
bgColor | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
border | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
caption | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
cellPadding | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
cellSpacing | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
createCaption | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
createTBody | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 25 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support 25 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
createTFoot | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
createTHead | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
deleteCaption | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
deleteRow | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
deleteTFoot | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
deleteTHead | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
frame | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
insertRow | Chrome Full support 4 | Edge Full support 12 | Firefox
Full support
3
| IE Full support 5.5 | Opera Full support 10 | Safari Full support 4 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
4
| Opera Android Full support 10.1 | Safari iOS Full support 3.2 | Samsung Internet Android Full support 1.0 |
rows | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
rules | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
sortable | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android ? | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android ? |
stopSorting | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android ? | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android ? |
summary | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
tBodies | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
tFoot | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
tHead | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
width | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android ? | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
See also
- The HTML element implementing this interface:
<table>
.