path: root/files/zh-cn/web/api/htmltableelement/index.html

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

<p><strong><code>HTMLTableElement</code></strong> 接口在常用的 {{DOMxRef("HTMLElement")}} 接口的基础上，提供了专门的属性和方法来处理 HTML 文档中表格的布局与展示。通过继承，它也可以访问父接口 {{DOMxRef("HTMLElement")}} 中的成员。</p>

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

<h2 id="属性">属性</h2>

<p><em>继承自父接口，{{DOMxRef("HTMLElement")}}。</em></p>

<dl>
 <dt>{{DOMxRef("HTMLTableElement.caption")}}</dt>
 <dd>这是一个 {{DOMxRef("HTMLTableCaptionElement")}} ，表示作为子元素中的第一个 {{HTMLElement("caption")}} ，如果找不到则为 <code>null</code>。当设置此属性时，如果给出的对象不是一个 <code>&lt;caption&gt;</code>，一个带有 <code>HierarchyRequestError</code> 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象，它会被作为第一个子元素插入DOM树中，同时子元素中的第一个 <code>&lt;caption&gt;</code> 会被移除，如果存在的话。</dd>
 <dt>{{DOMxRef("HTMLTableElement.tHead")}}</dt>
 <dd>这是一个 {{DOMxRef("HTMLTableSectionElement")}}，表示子元素中的第一个 {{HTMLElement("thead")}}，如果找不到则为 <code>null</code> 。当设置此属性时，如果给出的对象不是一个 <code>&lt;thead&gt;</code>， 一个带有 <code>HierarchyRequestError</code> 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象，它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}} 也不是 {{HTMLElement("colgroup")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话），同时子元素中的第一个 <code>&lt;thead&gt;</code> 会被移除，如果存在的话。</dd>
 <dt>{{DOMxRef("HTMLTableElement.tFoot")}}</dt>
 <dd>这是一个 {{DOMxRef("HTMLTableSectionElement")}}， 表示子元素中的第一个 {{HTMLElement("tfoot")}}，如果找不到则为 <code>null</code>。当设置此属性时，如果给出的对象不是一个 <code>&lt;tfoot&gt;</code>，一个带有 <code>HierarchyRequestError</code> 名字的异常 {{DOMxRef("DOMException")}} 会被抛出。如果设置了正确的对象，它会被立即插入到DOM树中既不是 {{HTMLElement("caption")}}、{{HTMLElement("colgroup")}} 也不是 {{HTMLElement("thead")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话），同时子元素中的第一个 <code>&lt;tfoot&gt;</code> 会被移除，如果存在的话。</dd>
 <dt>{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}</dt>
 <dd>返回一个实时的 {{DOMxRef("HTMLCollection")}}，它包含元素中的所有行，也就是子元素中的所有 {{HTMLElement("tr")}}，或者是 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}} 和 {{HTMLElement("tfoot")}} 三者子元素中的其中一个子元素。<code>&lt;thead&gt;</code> 中的行会按照DOM树的顺序出现在首位，<code>&lt;tbody&gt;</code> 中的行出现在末位，也会按照DOM树的顺序。<code>HTMLCollection</code> 对象是实时的，当 <code>HTMLTableElement</code> 发生变化时会自动更新。</dd>
 <dt>{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}</dt>
 <dd>返回一个实时的 {{DOMxRef("HTMLCollection")}}，它包含元素中所有的 {{HTMLElement("tbody")}}。<code>HTMLCollection</code> 对象是实时的，当 <code>HTMLTableElement</code> 发生变化时会自动更新。</dd>
</dl>

<h3 id="过时的属性">过时的属性</h3>

<div class="blockIndicator warning">
<p><strong>警告：以下属性已经过时，应当避免使用它们。</strong></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="方法">方法</h2>

<p><em>继承自父接口，{{DOMxRef("HTMLElement")}}</em>。</p>

<dl>
 <dt>{{DOMxRef("HTMLTableElement.createTHead()")}}</dt>
 <dd>返回一个 {{DOMxRef("HTMLElement")}}，表示子元素中的第一个 {{HTMLElement("thead")}}。如果找不到，则创建一个新的并且立即插入到DOM树中既不是 {{HTMLElement("caption")}} 也不是 {{HTMLElement("colgroup")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话）。</dd>
 <dt>{{DOMxRef("HTMLTableElement.deleteTHead()")}}</dt>
 <dd>移除子元素中的第一个 {{HTMLElement("thead")}}。</dd>
 <dt>{{DOMxRef("HTMLTableElement.createTFoot()")}}</dt>
 <dd>返回一个 {{DOMxRef("HTMLElement")}}，表示子元素中的第一个 {{HTMLElement("tfoot")}}。如果找不到，则创建一个新的并且立即插入到DOM树中既不是 {{HTMLElement("caption")}}、{{HTMLElement("colgroup")}} 也不是 {{HTMLElement("thead")}} 的第一个元素之前，或者直接被作为最后一个元素插入（如果找不到上述元素的话）。</dd>
 <dt>{{DOMxRef("HTMLTableElement.deleteTFoot()")}}</dt>
 <dd>移除子元素中的第一个 {{HTMLElement("tfoot")}}。</dd>
 <dt>{{DOMxRef("HTMLTableElement.createCaption()")}}</dt>
 <dd>返回一个 {{DOMxRef("HTMLElement")}}，表示子元素中的第一个 {{HTMLElement("caption")}}。 如果找不到，则创建一个新的并且插入到DOM树中作为 {{HTMLElement("table")}} 的第一个子元素。</dd>
 <dt>{{DOMxRef("HTMLTableElement.deleteCaption()")}}</dt>
 <dd>移除子元素中的第一个 {{HTMLElement("caption")}}。</dd>
 <dt>{{DOMxRef("HTMLTableElement.insertRow()")}}</dt>
 <dd>返回一个 {{DOMxRef("HTMLTableRowElement")}}，表示表格中的一个新行。它会被立即插入到行集合中给定 <code>index</code> 位置所表示的 {{HTMLElement("tr")}} 元素之前。如果有必要一个 {{HTMLElement("tbody")}} 会被创建。如果 <code>index</code> 值为 <code>-1</code>， 这个新行会被追加到集合中。如果 <code>index</code> 值小于 <code>-1</code> 或者大于集合中的行总数，一个带有 <code>IndexSizeError</code> 值的异常 {{DOMxRef("DOMException")}} 会发生。</dd>
 <dt>{{DOMxRef("HTMLTableElement.deleteRow()")}}</dt>
 <dd>移除与参数中给定 <code>index</code> 值相关的行。如果 <code>index</code> 值为 <code>-1</code>，最后一行会被移除；如果 <code>index</code> 值小于 <code>-1</code> 或者大于集合中的行总数，一个带有 <code>IndexSizeError</code> 值的异常 {{DOMxRef("DOMException")}} 会发生。</dd>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>添加了 <code>sortable</code> 属性和 <code>stopSorting()</code> 方法。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>添加了 <code>createTBody()</code> 方法。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>规定了当 <code>caption</code>、<code>tHead</code>、<code>tFoot</code>、<code>insertRow()</code> 和 <code>deleteRow()</code> 发生异常时。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>初始定义。</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



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

<h2 id="另请参阅">另请参阅</h2>

<ul>
 <li>实现了这个接口的HTML元素：{{HTMLElement("table")}}。</li>
</ul>