1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
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><caption></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><caption></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><thead></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><thead></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><tfoot></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><tfoot></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><thead></code> appear first, in tree order, and those members of a <code><tbody></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>
|
