1. 4.9 表格数据
      1. 4.9.1 table 元素
        1. 4.9.1.1 描述表格的技术
        2. 4.9.1.2 表格设计技术
      2. 4.9.2 caption 元素
      3. 4.9.3 colgroup 元素
      4. 4.9.4 col 元素
      5. 4.9.5 tbody 元素
      6. 4.9.6 thead 元素
      7. 4.9.7 tfoot 元素
      8. 4.9.8 tr 元素
      9. 4.9.9 td 元素
      10. 4.9.10 th 元素
      11. 4.9.11 tdth 元素的公共属性
      12. 4.9.12 处理模型
        1. 4.9.12.1 形成表格
        2. 4.9.12.2 形成数据单元格和表头单元格之间的关系
      13. 4.9.13 示例

4.9 表格数据

4.9.1 table 元素

元素/table

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容.
可感知内容.
可以使用此元素的上下文:
在预期 流内容 的地方。
内容模型:
按此顺序:可选地一个 caption 元素,后面跟着零个或多个 colgroup 元素,后面可选地跟着一个 thead 元素,后面跟着零个或多个 tbody 元素或一个或多个 tr 元素,后面可选地跟着一个 tfoot 元素,可选地与一个或多个 脚本支持元素 交织在一起。
在 text/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
[Exposed=Window]
interface HTMLTableElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute HTMLTableCaptionElement? caption;
  HTMLTableCaptionElement createCaption();
  [CEReactions] undefined deleteCaption();

  [CEReactions] attribute HTMLTableSectionElement? tHead;
  HTMLTableSectionElement createTHead();
  [CEReactions] undefined deleteTHead();

  [CEReactions] attribute HTMLTableSectionElement? tFoot;
  HTMLTableSectionElement createTFoot();
  [CEReactions] undefined deleteTFoot();

  [SameObject] readonly attribute HTMLCollection tBodies;
  HTMLTableSectionElement createTBody();

  [SameObject] readonly attribute HTMLCollection rows;
  HTMLTableRowElement insertRow(optional long index = -1);
  [CEReactions] undefined deleteRow(long index);

  // also has obsolete members
};

table 元素 表示具有多个维度的的数据,以 表格 的形式。

table 元素参与 表格模型。表格由其后代元素给出行、列和单元格。行和列形成一个网格;表格的单元格必须完全覆盖该网格,并且不能重叠。

确定是否满足此一致性要求的精确规则在 表格模型 的描述中进行了说明。

鼓励作者提供信息来描述如何解释复杂的表格。下面提供了有关如何 提供此类信息 的指南。

表格不能用作布局辅助工具。历史上,一些网页作者滥用 HTML 中的表格来控制其页面布局。此用法不符合标准,因为尝试从此类文档中提取表格数据的工具将获得非常混乱的结果。特别是,使用屏幕阅读器等辅助功能的用户可能会发现使用表格进行布局的页面非常难以导航。

除了使用 HTML 表格进行布局之外,还有多种替代方案,例如 CSS 网格布局、CSS 弹性盒子布局(“flexbox”)、CSS 多列布局、CSS 定位和 CSS 表格模型。[CSS]


表格可能很复杂,难以理解和导航。为了帮助用户做到这一点,用户代理应清楚地区分表格中的单元格,除非用户代理将表格分类为(不符合标准的)布局表格。

鼓励作者和实现者考虑使用下面描述的一些 表格设计技术,使表格更容易供用户导航。

鼓励用户代理,特别是那些对任意内容进行表格分析的用户代理,找到启发式方法来确定哪些表格实际上包含数据,哪些只是用于布局。本规范未定义精确的启发式方法,但以下建议作为可能的指标

功能指示
使用 role 属性,其值为 presentation可能是一个布局表格
使用不符合标准的 border 属性,其值为 0可能是一个布局表格
使用不符合标准的 cellspacingcellpadding 属性,其值为 0可能是一个布局表格
使用 captiontheadth 元素可能是一个非布局表格
使用 headersscope 属性可能是一个非布局表格
使用不符合标准的 border 属性,其值不为 0可能是一个非布局表格
使用 CSS 设置显式可见边框可能是一个非布局表格
使用 summary 属性不是一个好的指标(布局和非布局表格历史上都使用了此属性)

上述建议很可能是不正确的。敦促实现者提供反馈,详细说明他们尝试创建布局表格检测启发式方法的经验。

如果 table 元素具有(不符合标准的)summary 属性,并且用户代理未将表格分类为布局表格,则用户代理可能会将该属性的内容报告给用户。


table.caption [ = value ]

HTMLTableElement/caption

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 caption 元素。

可以设置,以替换 caption 元素。

caption = table.createCaption()

HTMLTableElement/createCaption

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格具有 caption 元素,并返回它。

table.deleteCaption()

HTMLTableElement/deleteCaption

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 caption 元素。

table.tHead [ = value ]

HTMLTableElement/tHead

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 thead 元素。

可以设置,以替换 thead 元素。如果新值不是 thead 元素,则抛出一个 "HierarchyRequestError" DOMException

thead = table.createTHead()

HTMLTableElement/createTHead

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格具有 thead 元素,并返回它。

table.deleteTHead()

HTMLTableElement/deleteTHead

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 thead 元素。

table.tFoot [ = value ]

HTMLTableElement/tFoot

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 tfoot 元素。

可以设置,以替换 tfoot 元素。如果新值不是 tfoot 元素,则抛出一个 "HierarchyRequestError" DOMException

tfoot = table.createTFoot()

HTMLTableElement/createTFoot

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格具有 tfoot 元素,并返回它。

table.deleteTFoot()

HTMLTableElement/deleteTFoot

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 tfoot 元素。

table.tBodies

HTMLTableElement/tBodies

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 HTMLCollectiontbody 元素。

tbody = table.createTBody()

HTMLTableElement/createTBody

所有当前引擎都支持。

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge (旧版)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

创建一个 tbody 元素,将其插入表格中,并返回该元素。

table.rows

HTMLTableElement/rows

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个包含表格中所有 tr 元素的 HTMLCollection

tr = table.insertRow([ index ])

HTMLTableElement/insertRow

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera10+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

创建一个 tr 元素,以及一个根据需要创建的 tbody 元素,将它们插入到表格中参数指定的位置,并返回 tr 元素。

位置相对于表格中的行。索引 -1(如果省略参数,则为默认值)等效于插入到表格的末尾。

如果给定的位置小于 -1 或大于行数,则抛出一个 "IndexSizeError" DOMException 异常。

table.deleteRow(index)

HTMLTableElement/deleteRow

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

移除表格中给定位置的 tr 元素。

位置相对于表格中的行。索引 -1 等效于删除表格的最后一行。

如果给定的位置小于 -1 或大于最后一行索引,或者如果表格中没有行,则抛出一个 "IndexSizeError" DOMException 异常。

在以下所有属性和方法定义中,当一个元素需要被 table-created 时,这意味着根据 table 元素的 node document、给定的本地名称和 HTML 命名空间 创建一个元素。

caption IDL 属性在获取时必须返回 table 元素的第一个 caption 元素子节点(如果存在),否则返回 null。在设置时,必须移除 table 元素的第一个 caption 元素子节点(如果存在),并且如果新值不为 null,则必须将其插入为 table 元素的第一个节点。

createCaption() 方法必须返回 table 元素的第一个 caption 元素子节点(如果存在);否则,必须 table-创建 一个新的 caption 元素,将其插入为 table 元素的第一个节点,然后返回该新元素。

deleteCaption() 方法必须移除 table 元素的第一个 caption 元素子节点(如果存在)。

tHead IDL 属性在获取时必须返回 table 元素的第一个 thead 元素子节点(如果存在),否则返回 null。在设置时,如果新值为 null 或 thead 元素,则必须移除 table 元素的第一个 thead 元素子节点(如果存在),并且如果新值不为 null,则必须将其插入到 table 元素中第一个既不是 caption 元素也不是 colgroup 元素的元素之前(如果存在),或者如果不存在这样的元素,则插入到表格的末尾。如果新值既不是 null 也不是 thead 元素,则必须抛出一个 "HierarchyRequestError" DOMException 异常。

createTHead() 方法必须返回 table 元素的第一个 thead 元素子节点(如果存在);否则,必须 table-创建 一个新的 thead 元素,并将其插入到 table 元素中第一个既不是 caption 元素也不是 colgroup 元素的元素之前(如果存在),或者如果不存在这样的元素,则插入到表格的末尾,然后返回该新元素。

deleteTHead() 方法必须移除 table 元素的第一个 thead 元素子节点(如果存在)。

tFoot IDL 属性在获取时必须返回 table 元素的第一个 tfoot 元素子节点(如果存在),否则返回 null。在设置时,如果新值为 null 或 tfoot 元素,则必须移除 table 元素的第一个 tfoot 元素子节点(如果存在),并且如果新值不为 null,则必须将其插入到表格的末尾。如果新值既不是 null 也不是 tfoot 元素,则必须抛出一个 "HierarchyRequestError" DOMException 异常。

createTFoot() 方法必须返回 table 元素的第一个 tfoot 元素子节点(如果存在);否则,必须 table-创建 一个新的 tfoot 元素,并将其插入到表格的末尾,然后返回该新元素。

deleteTFoot() 方法必须移除 table 元素的第一个 tfoot 元素子节点(如果存在)。

tBodies 属性必须返回一个以 table 节点为根的 HTMLCollection,其过滤器仅匹配 table 元素的子节点 tbody 元素。

createTBody() 方法必须 table-创建 一个新的 tbody 元素,将其插入到 table 元素的最后一个 tbody 元素子节点之后(如果存在),或者如果 table 元素没有 tbody 元素子节点,则插入到 table 元素的末尾,然后返回该新的 tbody 元素。

rows 属性必须返回一个以 table 节点为根的 HTMLCollection,其过滤器仅匹配 table 元素的子节点或 theadtbodytfoot 元素(它们本身是 table 元素的子节点)的子节点的 tr 元素。集合中的元素必须按顺序排列,其中父节点为 thead 的元素首先包含在内,按 树形顺序排列,然后是父节点为 tabletbody 元素的元素,同样按 树形顺序排列,最后是父节点为 tfoot 元素的元素,仍然按 树形顺序排列。

insertRow(index) 方法的行为取决于表格的状态。当调用该方法时,该方法必须根据描述表格状态和 index 参数的以下条件列表中的第一项的要求执行

如果 index 小于 -1 或大于 rows 集合中元素的数量
该方法必须抛出一个"IndexSizeError" DOMException
如果rows 集合中没有元素,并且table 中没有tbody 元素
该方法必须table-create 一个tbody 元素,然后table-create 一个tr 元素,然后将tr 元素追加到tbody 元素中,然后将tbody 元素追加到table 元素中,最后返回tr 元素。
如果rows 集合中没有元素
该方法必须table-create 一个tr 元素,将其追加到表格中最后一个tbody 元素,并返回tr 元素。
如果index 为 -1 或等于rows 集合中项目的数量
该方法必须table-create 一个tr 元素,并将其追加到rows 集合中最后一个tr 元素的父元素。然后,必须返回新创建的tr 元素。
否则
该方法必须table-create 一个tr 元素,将其插入到rows 集合中第indextr 元素的前面,在同一个父元素中,最后必须返回新创建的tr 元素。

当调用deleteRow(index) 方法时,用户代理必须执行以下步骤

  1. 如果index 小于 -1 或大于或等于rows 集合中元素的数量,则抛出一个"IndexSizeError" DOMException

  2. 如果index 为 -1,则从其父元素中移除rows 集合中的最后一个元素,或者如果rows 集合为空则不执行任何操作。

  3. 否则,从其父元素中移除rows 集合中的第index个元素。

这是一个使用表格标记数独谜题的示例。请注意缺少标题,在这样的表格中不需要标题。

<style>
 #sudoku { border-collapse: collapse; border: solid thick; }
 #sudoku colgroup, table#sudoku tbody { border: solid medium; }
 #sudoku td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<h1>Today's Sudoku</h1>
<table id="sudoku">
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <tbody>
  <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
  <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
  <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
 <tbody>
  <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
  <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
  <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
 <tbody>
  <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
  <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
  <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
</table>
4.9.1.1 描述表格的技术

对于不仅仅由带标题的第一行和带标题的第一列的单元格网格组成的表格,以及对于读者可能难以理解内容的任何表格,作者应包含介绍表格的解释性信息。此信息对所有用户都有用,但对于无法查看表格的用户(例如屏幕阅读器用户)尤其有用。

此类解释性信息应介绍表格的目的,概述其基本单元格结构,突出任何趋势或模式,并通常指导用户如何使用表格。

例如,下表

具有正面和负面的特征
负面特征正面
悲伤情绪快乐
不及格等级及格

……可能受益于解释表格布局方式的描述,例如“特征在第二列中给出,左侧列为负面,右侧列为正面”。

有多种方法可以包含此信息,例如

在表格周围使用散文
<p>In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.</p>
<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>
在表格的caption
<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>
在表格的caption中,在details元素中
<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.</p>
  </details>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>
在表格旁边,在同一个figure
<figure>
 <figcaption>Characteristics with positive and negative sides</figcaption>
 <p>Characteristics are given in the second column, with the
 negative side in the left column and the positive side in the right
 column.</p>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>
在表格旁边,在figurefigcaption
<figure>
 <figcaption>
  <strong>Characteristics with positive and negative sides</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </figcaption>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>

作者还可以根据需要使用其他技术或上述技术的组合。

当然,最好的选择不是编写解释表格布局方式的描述,而是调整表格,以便不需要解释。

在上面示例中使用的表格的情况下,简单地重新排列表格,使标题位于顶部和左侧,消除了对解释的需求,也消除了对使用headers属性的需求

<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th> Characteristic
   <th> Negative
   <th> Positive
 <tbody>
  <tr>
   <th> Mood
   <td> Sad
   <td> Happy
  <tr>
   <th> Grade
   <td> Failing
   <td> Passing
</table>
4.9.1.2 表格设计技术

良好的表格设计是使表格更易读和更易用的关键。

在视觉媒体中,提供列和行边框以及交替的行背景可以非常有效地使复杂的表格更易读。

对于包含大量数字内容的表格,使用等宽字体可以帮助用户查看模式,尤其是在用户代理不呈现边框的情况下。(不幸的是,由于历史原因,不呈现表格边框是一种常见的默认设置。)

在语音媒体中,可以通过在读取单元格内容之前报告相应的标题来区分表格单元格,并允许用户以网格方式导航表格,而不是按源顺序序列化表格的全部内容。

鼓励作者使用 CSS 来实现这些效果。

鼓励用户代理在页面不使用 CSS 且表格未被分类为布局表格时,使用这些技术呈现表格。

4.9.2 caption 元素

元素/caption

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableCaptionElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为table元素的第一个元素子元素。
内容模型:
流内容,但没有后代table元素。
在 text/html 中的标签省略:
如果caption元素后面没有紧跟着ASCII 空格注释,则可以省略caption元素的结束标签
内容属性:
全局属性
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
[Exposed=Window]
interface HTMLTableCaptionElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

如果caption元素有父元素且该父元素是table元素,则caption元素表示其父元素table的标题。

caption元素参与表格模型

table元素是figure元素中除了figcaption之外的唯一内容时,应省略caption元素,而应使用figcaption

标题可以为表格引入上下文,使其更容易理解。

例如,考虑下表

1 2 3 4 5 6
1 2 3 4 5 6 7
2 3 4 5 6 7 8
3 4 5 6 7 8 9
4 5 6 7 8 9 10
5 6 7 8 9 10 11
6 7 8 9 10 11 12

从抽象的角度来看,此表并不清晰。但是,如果使用标题给出表格的编号(以便在主要文本中引用)并解释其用途,则更有意义

<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>

这为用户提供了更多上下文

表 1。

此表显示了掷两个六面骰子获得的总分数。第一行表示第一个骰子的值,第一列表示第二个骰子的值。总计在对应于两个骰子值的单元格中给出。

1 2 3 4 5 6
1 2 3 4 5 6 7
2 3 4 5 6 7 8
3 4 5 6 7 8 9
4 5 6 7 8 9 10
5 6 7 8 9 10 11
6 7 8 9 10 11 12

4.9.3 colgroup 元素

元素/colgroup

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableColElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为table元素的子元素,位于任何caption元素之后以及任何theadtbodytfoottr元素之前。
内容模型:
如果存在span属性:
如果不存在span属性:零个或多个coltemplate元素。
在 text/html 中的标签省略:
如果col元素是colgroup元素中的第一个内容,并且该元素前面没有紧跟着另一个colgroup元素(其结束标签已被省略),则可以省略colgroup元素的开始标签。(如果该元素为空,则不能省略。)

如果`colgroup` 元素后面没有紧跟着ASCII 空格注释,则可以省略`colgroup` 元素的结束标签
内容属性:
全局属性
span — 元素所跨列数
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
[Exposed=Window]
interface HTMLTableColElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute unsigned long span;

  // also has obsolete members
};

如果`colgroup` 元素有父元素且该父元素是`table` 元素,则该`colgroup` 元素表示其父元素`table` 中的一个或多个

如果`colgroup` 元素不包含任何`col` 元素,则该元素可以指定一个span 内容属性,其值必须是大于 0 且小于或等于 1000 的有效非负整数

`colgroup` 元素及其`span` 属性参与表格模型

span IDL 属性必须反映同名内容属性。它被限制在 [1, 1000] 范围内,其默认值为 1。

4.9.4 `col` 元素

元素/col

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
无。
可以使用此元素的上下文:
作为`colgroup` 元素的子元素,且该`colgroup` 元素没有`span` 属性。
内容模型:
.
在 text/html 中的标签省略:
没有结束标签
内容属性:
全局属性
span — 元素所跨列数
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
使用`HTMLTableColElement`,其定义与`colgroup` 元素相同。

如果`col` 元素有父元素且该父元素是`colgroup` 元素,并且该`colgroup` 元素的父元素是`table` 元素,则`col` 元素表示该`colgroup` 所表示的列组中的一列或多列。

该元素可以指定一个span 内容属性,其值必须是大于 0 且小于或等于 1000 的有效非负整数

`col` 元素及其`span` 属性参与表格模型

4.9.5 `tbody` 元素

元素/tbody

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableSectionElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为`table` 元素的子元素,位于任何`caption`、`colgroup` 和`thead` 元素之后,但前提是`table` 元素没有`tr` 元素作为其子元素。
内容模型:
零个或多个`tr` 和脚本支持元素。
在 text/html 中的标签省略:
如果`tbody` 元素中的第一个元素是`tr` 元素,并且该元素前面没有紧跟着`tbody`、`thead` 或`tfoot` 元素(其结束标签已被省略),则可以省略`tbody` 元素的开始标签。(如果该元素为空,则不能省略)。
如果`tbody` 元素后面紧跟着`tbody` 或`tfoot` 元素,或者父元素中没有更多内容,则可以省略`tbody` 元素的结束标签
内容属性:
全局属性
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
[Exposed=Window]
interface HTMLTableSectionElement : HTMLElement {
  [HTMLConstructor] constructor();

  [SameObject] readonly attribute HTMLCollection rows;
  HTMLTableRowElement insertRow(optional long index = -1);
  [CEReactions] undefined deleteRow(long index);

  // also has obsolete members
};

`HTMLTableSectionElement` 接口也用于`thead` 和`tfoot` 元素。

如果`tbody` 元素有父元素且该父元素是`table` 元素,则该`tbody` 元素表示父元素`table` 的数据主体中的

`tbody` 元素参与表格模型

tbody.rows

返回表格节中`tr` 元素的HTMLCollection

tr = tbody.insertRow([ index ])

创建一个`tr` 元素,将其插入到表格节中参数给定的位置,并返回该`tr` 元素。

该位置相对于表格节中的行。如果省略参数,则索引 -1 为默认值,等效于插入到表格节的末尾。

如果给定的位置小于 -1 或大于行数,则抛出"IndexSizeError" DOMException

tbody.deleteRow(index)

移除表格节中给定位置的`tr` 元素。

该位置相对于表格节中的行。索引 -1 等效于删除表格节的最后一行。

如果给定的位置小于 -1 或大于最后一行索引,或者没有行,则抛出"IndexSizeError" DOMException

rows 属性必须返回一个以当前元素为根的HTMLCollection,其过滤器仅匹配当前元素子元素中`tr` 元素。

insertRow(index) 方法必须按如下方式操作

  1. 如果index小于 -1 或大于rows 集合中的元素数,则抛出"IndexSizeError" DOMException

  2. table row 为根据当前元素的节点文档、`tr` 和HTML 命名空间创建元素的结果。

  3. 如果index为 -1 或等于rows 集合中的项数,则追加table row 到当前元素。

  4. 否则,插入table row 作为当前元素的子元素,紧接在rows 集合中的第 index 个`tr` 元素之前。

  5. 返回table row

deleteRow(index) 方法在调用时必须按如下方式操作

  1. 如果index小于 -1 或大于或等于rows 集合中的元素数,则抛出"IndexSizeError" DOMException

  2. 如果index为 -1,则移除rows 集合中的最后一个元素,或如果rows 集合为空则不执行任何操作。

  3. 否则,移除rows 集合中的第 index 个元素。

4.9.6 `thead` 元素

元素/thead

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为`table` 元素的子元素,位于任何`caption` 和`colgroup` 元素之后,并且位于任何`tbody`、`tfoot` 和`tr` 元素之前,但前提是`table` 元素没有其他`thead` 元素作为其子元素。
内容模型:
零个或多个 tr 元素和 脚本支持 元素。
在 text/html 中的标签省略:
如果 thead 元素紧跟着一个 tbodytfoot 元素,则可以省略 thead 元素的 结束标签
内容属性:
全局属性
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
使用 HTMLTableSectionElement,如 tbody 元素所定义。

如果 thead 元素有父元素且该父元素为 table,则 thead 元素 表示 由列标签(标题)和父 table 元素的任何辅助非标题单元格组成的

thead 元素参与 表格模型

此示例显示了 thead 元素的使用。请注意 thtd 元素在 thead 元素中的使用方式:第一行是标题,第二行是对如何填写表格的说明。

<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="https://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>

4.9.7 tfoot 元素

元素/tfoot

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为 table 元素的子元素,位于任何 captioncolgrouptheadtbodytr 元素之后,但前提是 table 元素没有其他 tfoot 元素作为子元素。
内容模型:
零个或多个 tr 元素和 脚本支持 元素。
在 text/html 中的标签省略:
如果父元素中没有更多内容,则可以省略 tfoot 元素的 结束标签
内容属性:
全局属性
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
使用 HTMLTableSectionElement,如 tbody 元素所定义。

如果 tfoot 元素有父元素且该父元素为 table,则 tfoot 元素 表示 由列汇总(页脚)组成的 ,用于父 table 元素。

tfoot 元素参与 表格模型

4.9.8 tr 元素

元素/tr

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableRowElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为 thead 元素的子元素。
作为 tbody 元素的子元素。
作为 tfoot 元素的子元素。
作为 table 元素的子元素,位于任何 captioncolgroupthead 元素之后,但前提是 table 元素没有 tbody 元素作为子元素。
内容模型:
零个或多个 tdth 元素和 脚本支持 元素。
在 text/html 中的标签省略:
如果 tr 元素紧跟着另一个 tr 元素,或者父元素中没有更多内容,则可以省略 tr 元素的 结束标签
内容属性:
全局属性
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
[Exposed=Window]
interface HTMLTableRowElement : HTMLElement {
  [HTMLConstructor] constructor();

  readonly attribute long rowIndex;
  readonly attribute long sectionRowIndex;
  [SameObject] readonly attribute HTMLCollection cells;
  HTMLTableCellElement insertCell(optional long index = -1);
  [CEReactions] undefined deleteCell(long index);

  // also has obsolete members
};

tr 元素 表示 表格中的一 单元格

tr 元素参与 表格模型

tr.rowIndex

HTMLTableRowElement/rowIndex

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回行在表格的 rows 列表中的位置。

如果元素不在表格中,则返回 -1。

tr.sectionRowIndex

返回行在表格部分的 rows 列表中的位置。

如果元素不在表格部分中,则返回 -1。

tr.cells

返回行的 tdth 元素的 HTMLCollection

cell = tr.insertCell([ index ])

HTMLTableRowElement/insertCell

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

创建一个 td 元素,将其插入到表格行的参数给定的位置,并返回该 td

该位置相对于行中的单元格。索引 -1(如果省略参数,则为默认值)等效于插入到行的末尾。

如果给定的位置小于 -1 或大于单元格数,则抛出 "IndexSizeError" DOMException

tr.deleteCell(index)

删除行中给定位置的 tdth 元素。

该位置相对于行中的单元格。索引 -1 等效于删除行的最后一个单元格。

如果给定的位置小于 -1 或大于最后一个单元格的索引,或者如果没有单元格,则抛出 "IndexSizeError" DOMException

如果此元素有父 table 元素,或者有父 tbodytheadtfoot 元素以及 祖父母 table 元素,则 rowIndex 属性必须返回此 tr 元素在该 table 元素的 rows 集合中的索引。如果没有这样的 table 元素,则该属性必须返回 -1。

如果此元素有父 tabletbodytheadtfoot 元素,则 sectionRowIndex 属性必须返回 tr 元素在父元素的 rows 集合中的索引(对于表格,即 HTMLTableElementrows 集合;对于表格部分,即 HTMLTableSectionElementrows 集合)。如果没有这样的父元素,则该属性必须返回 -1。

cells 属性必须返回一个以此 tr 元素为根的 HTMLCollection,其过滤器仅匹配 tr 元素的子元素 tdth 元素。

insertCell(index) 方法必须按如下方式执行

  1. 如果 index 小于 -1 或大于 cells 集合中元素的数量,则抛出 "IndexSizeError" DOMException

  2. table cell 为给定此 tr 元素的 节点文档tdHTML 命名空间创建元素 的结果。

  3. 如果 index 等于 -1 或等于 cells 集合中的项目数,则 附加 table cell 到此 tr 元素。

  4. 否则,插入 table cell 作为此 tr 元素的子元素,紧接在 cells 集合中的第 indextdth 元素之前。

  5. 返回 table cell

deleteCell(index) 方法必须按以下方式执行

  1. 如果 index 小于 −1 或大于或等于 cells 集合中元素的数量,则抛出一个 "IndexSizeError" DOMException

  2. 如果 index 等于 −1,则从其父级中 移除 cells 集合中的最后一个元素,或者如果 cells 集合为空,则不执行任何操作。

  3. 否则,从其父级中 移除 cells 集合中的第 index 个元素。

4.9.9 td 元素

元素/td

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableCellElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为 tr 元素的子元素。
内容模型:
流内容.
在 text/html 中的标签省略:
如果 td 元素紧跟着一个 tdth 元素,或者父元素中没有更多内容,则可以省略 td 元素的 结束标签
内容属性:
全局属性
colspan — 单元格要跨越的列数
rowspan — 单元格要跨越的行数
headers — 此单元格的标题单元格
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
[Exposed=Window]
interface HTMLTableCellElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute unsigned long colSpan;
  [CEReactions] attribute unsigned long rowSpan;
  [CEReactions] attribute DOMString headers;
  readonly attribute long cellIndex;

  [CEReactions] attribute DOMString scope; // only conforming for th elements
  [CEReactions] attribute DOMString abbr;  // only conforming for th elements

  // also has obsolete members
};

HTMLTableCellElement 接口也用于 th 元素。

td 元素 表示 表格中的数据 单元格

td 元素及其 colspanrowspanheaders 属性参与 表格模型

用户代理,尤其是在非视觉环境或将表格显示为二维网格不切实际的情况下,可能会在呈现单元格内容时为用户提供单元格的上下文;例如,给出其在 表格模型 中的位置,或列出单元格的标题单元格(由 分配标题单元格的算法 确定)。当列出单元格的标题单元格时,用户代理可能会使用这些标题单元格上的 abbr 属性的值(如果有),而不是标题单元格本身的内容。

在此示例中,我们看到了一个 Web 应用程序片段,该片段由一个可编辑单元格网格组成(本质上是一个简单的电子表格)。其中一个单元格已配置为显示其上方单元格的总和。三个单元格已被标记为标题,它们使用 th 元素而不是 td 元素。脚本将向这些元素附加事件处理程序以维护总计。

<table>
 <tr>
  <th><input value="Name">
  <th><input value="Paid ($)">
 <tr>
  <td><input value="Jeff">
  <td><input value="14">
 <tr>
  <td><input value="Britta">
  <td><input value="9">
 <tr>
  <td><input value="Abed">
  <td><input value="25">
 <tr>
  <td><input value="Shirley">
  <td><input value="2">
 <tr>
  <td><input value="Annie">
  <td><input value="5">
 <tr>
  <td><input value="Troy">
  <td><input value="5">
 <tr>
  <td><input value="Pierce">
  <td><input value="1000">
 <tr>
  <th><input value="Total">
  <td><output value="1060">
</table>

4.9.10 th 元素

元素/th

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为 tr 元素的子元素。
内容模型:
流内容,但不包含 headerfooter分段内容标题内容 后代。
在 text/html 中的标签省略:
如果 th 元素紧跟着一个 tdth 元素,或者父元素中没有更多内容,则可以省略 th 元素的 结束标签
内容属性:
全局属性
colspan — 单元格要跨越的列数
rowspan — 单元格要跨越的行数
headers — 此单元格的标题单元格
scope — 指定标题单元格应用于哪些单元格
abbr — 在其他上下文中引用单元格时使用的备用标签
可访问性注意事项:
供作者使用.
供实现者使用.
DOM 接口:
使用 HTMLTableCellElement,如 td 元素中定义的那样。

th 元素 表示 表格中的标题 单元格

th 元素可以指定 scope 内容属性。

scope 属性是一个 枚举属性,具有以下关键字和状态

关键字状态简要描述
row row 标题单元格应用于同一行(或多行)中的一些后续单元格。
col column 标题单元格应用于同一列(或多列)中的一些后续单元格。
rowgroup row group 标题单元格应用于行组中所有剩余的单元格。
colgroup column group 标题单元格应用于列组中所有剩余的单元格。

属性的 缺失值默认值无效值默认值 均为 auto 状态。(在此状态下,标题单元格应用于根据上下文选择的单元格集。)

如果元素未锚定在 行组 中,则 th 元素的 scope 属性不得处于 row group 状态;如果元素未锚定在 列组 中,则不得处于 column group 状态。

th 元素可以指定 abbr 内容属性。其值必须是标题单元格的备用标签,在其他上下文中引用单元格时使用(例如,在描述应用于数据单元格的标题单元格时)。它通常是完整标题单元格的缩写形式,但也可能是扩展,或者仅仅是不同的措辞。

th 元素及其 colspanrowspanheadersscope 属性参与 表格模型

以下示例显示了 scope 属性的 rowgroup 值如何影响标题单元格应用于哪些数据单元格。

这是一个显示表格的标记片段

<table>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th> Tails <td> 1 <td> 1
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th> Tails <td> 0.33 <td> 1
</table>

这将产生以下表格

ID测量平均值最大值
93 3.5 4
10 尾巴 1 1
英语使用者
32 2.67 4
35 尾巴 0.33 1

第一行中的标题全部直接向下应用到其列中的行。

scope 属性处于 rowgroup 状态的标题应用于其行组中的所有单元格,但不包括第一列中的单元格。

其余标题仅应用于其右侧的单元格。

4.9.11 tdth 元素的公共属性

tdth 元素可以指定 colspan 内容属性,其值必须是大于零且小于或等于 1000 的 有效非负整数

tdth 元素还可以指定 rowspan 内容属性,其值必须是小于或等于 65534 的 有效非负整数。对于此属性,值零表示单元格要跨越行组中所有剩余的行。

这些属性分别给出单元格要跨越的列数和行数。这些属性不得用于重叠单元格,如 表格模型 的描述中所述。


tdth 元素可以指定 headers 内容属性。如果指定了 headers 属性,则它必须包含一个字符串,该字符串由 一组无序的唯一空格分隔的标记 组成,这些标记中没有一个与另一个标记 相同,并且每个标记都必须具有参与与 tdth 元素相同 表格th 元素的 ID 值(由 表格模型 定义)。

如果一个具有 th 元素的 th 元素具有 ID id,则该 th 元素被称为被同一 table 中所有具有 headers 属性的 tdth 元素 直接关联,且这些 headers 属性的值包含 ID id 作为其标记之一。如果一个 th 元素 A 被一个 thtd 元素 B 关联,则意味着要么 AB 直接关联,要么存在一个元素 C,它本身被元素 B 关联,并且 AC 直接关联

一个 th 元素不能被自身关联

colspanrowspanheaders 属性参与 表格模型


cell.cellIndex

返回单元格在行 cells 列表中的位置。这并不一定对应单元格在表格中的 x 方向位置,因为之前的单元格可能覆盖多个行或列。

如果单元格不在行中,则返回 −1。

colSpan IDL 属性必须 反映 colspan 内容属性。它被限制在范围 [1, 1000] 内,其默认值 为 1。

rowSpan IDL 属性必须 反映 rowspan 内容属性。它被限制在范围 [0, 65534] 内,其默认值 为 1。

headers IDL 属性必须 反映 同名内容属性。

cellIndex IDL 属性必须在元素具有父 tr 元素的情况下,返回单元格元素在其父元素的 cells 集合中的索引。如果没有这样的父元素,则该属性必须返回 −1。

scope IDL 属性必须 反映 同名内容属性,仅限于已知的值

abbr IDL 属性必须 反映 同名内容属性。

4.9.12 处理模型

各种表格元素及其内容属性共同定义了 表格模型

一个 表格 由位于具有坐标 (x, y) 的二维 网格上的单元格组成。网格是有限的,并且要么为空,要么具有一个或多个槽。如果网格具有一个或多个槽,则 x 坐标始终在范围 0 ≤ x < xwidth 内,y 坐标始终在范围 0 ≤ y < yheight 内。如果 xwidthyheight 中的一个或两个为零,则表格为空(没有槽)。表格对应于 table 元素。

一个 单元格 是一组锚定在槽 (cellx, celly) 上且具有特定 widthheight 的槽,使得单元格覆盖所有具有坐标 (x, y) 的槽,其中 cellx ≤ x < cellx+widthcelly ≤ y < celly+height。单元格可以是数据单元格标题单元格。数据单元格对应于 td 元素,标题单元格对应于 th 元素。两种类型的单元格都可以具有零个或多个关联的标题单元格。

在某些错误情况下,两个单元格可能占据同一个槽。

一个 是一组完整的槽,从 x=0 到 x=xwidth-1,对于 y 的特定值。行通常对应于 tr 元素,尽管在某些涉及跨越多行的 单元格 的情况下,行组 在末尾可能有一些隐含的

一个 是一组完整的槽,从 y=0 到 y=yheight-1,对于 x 的特定值。列可以对应于 col 元素。在没有 col 元素的情况下,列是隐含的。

一个 行组 是一组锚定在槽 (0, groupy) 上且具有特定 height,使得行组覆盖所有具有坐标 (x, y) 的槽,其中 0 ≤ x < xwidthgroupy ≤ y < groupy+height。行组对应于 tbodytheadtfoot 元素。并非每一行都一定在行组中。

一个 列组 是一组锚定在槽 (groupx, 0) 上且具有特定 width,使得列组覆盖所有具有坐标 (x, y) 的槽,其中 groupx ≤ x < groupx+width0 ≤ y < yheight。列组对应于 colgroup 元素。并非每一列都一定在列组中。

行组 不能互相重叠。类似地,列组 不能互相重叠。

一个 单元格 不能覆盖来自两个或多个 行组 的槽。但是,一个单元格可能存在于多个 列组 中。构成一个单元格的所有槽都属于零个或一个 行组 和零个或多个 列组

除了 单元格行组列组 之外,表格 还可以具有与其关联的 caption 元素。这为表格提供了一个标题或图例。

一个 表格模型错误 是由 table 元素及其后代表示的数据的错误。文档不得包含表格模型错误。

4.9.12.1 形成表格

为了确定哪些元素对应于与 table 元素关联的 表格 中的哪些槽,以确定表格的尺寸 (xwidthyheight),并确定是否存在任何 表格模型错误,用户代理必须使用以下算法

  1. xwidth 为零。

  2. yheight 为零。

  3. 挂起的 tfoot 元素 为一个 tfoot 元素列表,最初为空。

  4. 表格table 元素所表示的 表格。变量 xwidthyheight 给出了 表格 的尺寸。表格 最初为空。

  5. 如果 table 元素没有子元素,则返回 表格(它将为空)。

  6. table 元素的第一个 caption 元素子元素与 表格 关联。如果没有这样的子元素,则它没有关联的 caption 元素。

  7. 当前元素table 元素的第一个元素子元素。

    如果此算法中的某个步骤需要在没有下一个子元素时将 当前元素 前进到 table 的下一个子元素,则用户代理必须跳转到标记为结束的步骤,该步骤位于此算法的末尾附近。

  8. 当前元素 不是以下元素之一时,前进 当前元素table 的下一个子元素

  9. 如果 当前元素 是一个 colgroup,请遵循以下子步骤

    1. 列组:根据以下适当的情况处理 当前元素

      如果 当前元素 具有任何 col 元素子元素

      遵循以下步骤

      1. xstart 的值为 xwidth

      2. 当前列colgroup 元素的第一个 col 元素子元素。

      3. :如果当前列col元素具有span属性,则使用解析非负整数的规则解析其值。

        如果解析结果不是错误或零,则令span为该值。

        否则,如果col元素没有span属性,或者尝试解析属性值导致错误或零,则令span为1。

        如果span大于1000,则将其改为1000。

      4. xwidth增加span

      5. 表格中最后的span列对应于当前列col元素。

      6. 如果当前列不是colgroup元素的最后一个col元素子节点,则令当前列colgroup元素的下一个col元素子节点,并返回到标记为的步骤。

      7. 表格中从x=xstartx=xwidth-1的所有最后一列形成一个新的列组,锚定在插槽(xstart, 0)处,宽度为xwidth-xstart,对应于colgroup元素。

      如果当前元素没有col元素子节点
      1. 如果colgroup元素具有span属性,则使用解析非负整数的规则解析其值。

        如果解析结果不是错误或零,则令span为该值。

        否则,如果colgroup元素没有span属性,或者尝试解析属性值导致错误或零,则令span为1。

        如果span大于1000,则将其改为1000。

      2. xwidth增加span

      3. 表格中最后的span形成一个新的列组,锚定在插槽(xwidth-span, 0)处,宽度为span,对应于colgroup元素。

    2. 前进当前元素table的下一个子节点。

    3. 当前元素不是以下元素之一时,前进当前元素table的下一个子节点

    4. 如果当前元素colgroup元素,则跳转到上面标记为列组的步骤。

  10. ycurrent为零。

  11. 向下增长的单元格列表为空列表。

  12. :当当前元素不是以下元素之一时,前进当前元素table的下一个子节点

  13. 如果当前元素tr,则运行处理行的算法前进当前元素table的下一个子节点,并返回到标记为的步骤。

  14. 运行结束行组的算法

  15. 如果当前元素tfoot,则将该元素添加到挂起的tfoot元素列表中,前进当前元素table的下一个子节点,并返回到标记为的步骤。

  16. 当前元素要么是thead,要么是tbody

    运行处理行组的算法

  17. 前进当前元素table的下一个子节点。

  18. 返回到标记为的步骤。

  19. 结束:对于挂起的tfoot元素列表中的每个tfoot元素,按照树的顺序,运行处理行组的算法

  20. 如果表格中存在一个,其中只包含没有单元格锚定的插槽,则这是一个表格模型错误

  21. 返回表格

上面步骤集中用于处理theadtbodytfoot元素的处理行组的算法

  1. ystart的值为yheight

  2. 对于正在处理的元素的每个tr元素子节点,按照树的顺序,运行处理行的算法

  3. 如果yheight > ystart,则令表格中从y=ystarty=yheight-1的所有最后一行形成一个新的行组,锚定在坐标为(0, ystart)的插槽处,高度为yheight-ystart,对应于正在处理的元素。

  4. 运行结束行组的算法

上面步骤集中在开始和结束一行块时调用的结束行组的算法

  1. ycurrent小于yheight时,执行以下步骤

    1. 运行使向下增长的单元格增长的算法

    2. ycurrent增加1。

  2. 清空向下增长的单元格列表

上面步骤集中用于处理tr元素的处理行的算法

  1. 如果yheight等于ycurrent,则将yheight增加1。(ycurrent永远不会大于yheight。)

  2. xcurrent为0。

  3. 运行使向下增长的单元格增长的算法

  4. 如果正在处理的tr元素没有tdth元素子节点,则将ycurrent增加1,中止此步骤集,并返回到上面的算法。

  5. 当前单元格为正在处理的tr元素的第一个tdth元素子节点。

  6. 单元格:当xcurrent小于xwidth且坐标为(xcurrent, ycurrent)的插槽已分配给单元格时,将xcurrent增加1。

  7. 如果xcurrent等于xwidth,则将xwidth增加1。(xcurrent永远不会大于xwidth。)

  8. 如果当前单元格具有colspan属性,则解析该属性的值,并令colspan为结果。

    如果解析该值失败,或返回零,或属性不存在,则改为令colspan为1。

    如果colspan大于1000,则将其改为1000。

  9. 如果当前单元格具有rowspan属性,则解析该属性的值,并令rowspan为结果。

    如果解析该值失败或属性不存在,则改为令rowspan为1。

    如果rowspan大于65534,则将其改为65534。

  10. 如果rowspan为零且table元素的节点文档未设置为怪癖模式,则令单元格向下增长为true,并将rowspan设置为1。否则,令单元格向下增长为false。

  11. 如果xwidth < xcurrent+colspan,则令xwidthxcurrent+colspan

  12. 如果yheight < ycurrent+rowspan,则令yheightycurrent+rowspan

  13. 令坐标为(x, y)且满足xcurrent ≤ x < xcurrent+colspanycurrent ≤ y < ycurrent+rowspan的插槽被一个新的单元格c覆盖,锚定在(xcurrent, ycurrent)处,宽度为colspan,高度为rowspan,对应于当前单元格元素。

    如果当前单元格元素是th元素,则令此新单元格c为标题单元格;否则,令其为数据单元格。

    要确定哪些标题单元格应用于当前单元格元素,请使用下一节中描述的分配标题单元格的算法

    如果任何相关的插槽已经有一个单元格覆盖,则这是一个表格模型错误。这些插槽现在有两个单元格重叠。

  14. 如果`单元格向下扩展`为真,则将元组{cxcurrentcolspan}添加到`向下扩展单元格列表`中。

  15. xcurrent增加colspan

  16. 如果`当前单元格`是正在处理的`tr`元素的最后一个`td`或`th`元素子节点,则将ycurrent增加1,中止此步骤集,并返回到上述算法。

  17. 令`当前单元格`为正在处理的`tr`元素的下一个`td`或`th`元素子节点。

  18. 返回到标记为cells的步骤。

当上述算法要求用户代理运行`向下扩展单元格扩展算法`时,用户代理必须对`向下扩展单元格列表`中的每个{单元格cellxwidth}元组(如果有)进行扩展,使单元格单元格还覆盖坐标为(xycurrent)的槽,其中cellx ≤ x < cellx+width

4.9.12.2 形成数据单元格和标题单元格之间的关系

每个单元格可以分配零个或多个标题单元格。将`标题单元格分配算法`分配给单元格主体单元格的步骤如下。

  1. 标题列表为空的单元格列表。

  2. 令(principalxprincipaly)为主体单元格所锚定的槽的坐标。

  3. 如果主体单元格具有指定的`headers`属性
    1. 获取主体单元格的`headers`属性的值,并按ASCII空格拆分它,令id列表为获得的标记列表。

    2. 对于id列表中的每个标记,如果`Document`中具有与标记相等的`ID`的第一个元素是同一`表格`中的单元格,并且该单元格不是主体单元格,则将该单元格添加到标题列表中。

    如果主体单元格没有指定`headers`属性
    1. principalwidth主体单元格的宽度。

    2. principalheight主体单元格的高度。

    3. 对于从principalyprincipaly+principalheight-1的每个y值,运行`扫描和分配标题单元格的内部算法`,使用主体单元格标题列表、初始坐标(principalxy)以及增量Δx=−1Δy=0

    4. 对于从principalxprincipalx+principalwidth-1的每个x值,运行`扫描和分配标题单元格的内部算法`,使用主体单元格标题列表、初始坐标(xprincipaly)以及增量Δx=0Δy=−1

    5. 如果主体单元格锚定在`行组`中,则将所有作为`行组标题`且锚定在同一行组中,并且x坐标小于或等于principalx+principalwidth-1且y坐标小于或等于principaly+principalheight-1的标题单元格添加到标题列表中。

    6. 如果主体单元格锚定在`列组`中,则将所有作为`列组标题`且锚定在同一列组中,并且x坐标小于或等于principalx+principalwidth-1且y坐标小于或等于principaly+principalheight-1的标题单元格添加到标题列表中。

  4. 标题列表中删除所有`空单元格`。

  5. 标题列表中删除任何重复项。

  6. 如果主体单元格存在于标题列表中,则将其删除。

  7. 标题列表中的标题分配给主体单元格

给定主体单元格标题列表、初始坐标(initialxinitialy)以及Δx和Δy增量,`扫描和分配标题单元格的内部算法`的步骤如下

  1. x等于initialx

  2. y等于initialy

  3. 不透明标题为空的单元格列表。

  4. 如果主体单元格是标题单元格

    在标题块中为真,并令当前标题块中的标题为仅包含主体单元格的单元格列表。

    否则

    在标题块中为假,并令当前标题块中的标题为空的单元格列表。

  5. 循环:将x增加Δx;将y增加Δy

    对于此算法的每次调用,Δx和Δy之一将为−1,另一个将为0。

  6. 如果xy小于0,则中止此内部算法。

  7. 如果没有单元格覆盖槽(xy),或者有多个单元格覆盖槽(xy),则返回到标记为loop的子步骤。

  8. 当前单元格为覆盖槽(xy)的单元格。

  9. 如果当前单元格是标题单元格
    1. 在标题块中设置为真。

    2. 当前单元格添加到当前标题块中的标题中。

    3. 已阻止为假。

    4. 如果Δx为0

      如果不透明标题列表中存在任何与当前单元格具有相同x坐标且宽度与当前单元格相同的单元格,则令已阻止为真。

      如果当前单元格不是`列标题`,则令已阻止为真。

      如果Δy为0

      如果不透明标题列表中存在任何与当前单元格具有相同y坐标且高度与当前单元格相同的单元格,则令已阻止为真。

      如果当前单元格不是`行标题`,则令已阻止为真。

    5. 如果已阻止为假,则将当前单元格添加到标题列表中。

    如果当前单元格是数据单元格且在标题块中为真

    在标题块中设置为假。将当前标题块中的标题中的所有单元格添加到不透明标题列表中,并清空当前标题块中的标题列表。

  10. 返回到标记为loop的步骤。

如果满足以下任何条件,则称锚定在坐标为(xy)、宽度为width且高度为height的槽中的标题单元格为`列标题`

如果满足以下任何条件,则称锚定在坐标为(xy)、宽度为width且高度为height的槽中的标题单元格为`行标题`

如果其`scope`属性处于`column group`状态,则称标题单元格为`列组标题`。

如果其`scope`属性处于`row group`状态,则称标题单元格为`行组标题`。

如果单元格不包含任何元素,并且其`子文本内容`(如果有)仅由`ASCII空格`组成,则称该单元格为`空单元格`。

4.9.13 示例

本节是非规范性的。

以下显示了如何标记史密森物理表,第71卷中表45的底部部分。

<table>
 <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
 <thead>
  <tr>
   <th rowspan=2>Grade.</th>
   <th rowspan=2>Yield Point.</th>
   <th colspan=2>Ultimate tensile strength</th>
   <th rowspan=2>Per cent elong. 50.8&nbsp;mm or 2&nbsp;in.</th>
   <th rowspan=2>Per cent reduct. area.</th>
  </tr>
  <tr>
   <th>kg/mm<sup>2</sup></th>
   <th>lb/in<sup>2</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Hard</td>
   <td>0.45 ultimate</td>
   <td>56.2</td>
   <td>80,000</td>
   <td>15</td>
   <td>20</td>
  </tr>
  <tr>
   <td>Medium</td>
   <td>0.45 ultimate</td>
   <td>49.2</td>
   <td>70,000</td>
   <td>18</td>
   <td>25</td>
  </tr>
  <tr>
   <td>Soft</td>
   <td>0.45 ultimate</td>
   <td>42.2</td>
   <td>60,000</td>
   <td>22</td>
   <td>30</td>
  </tr>
 </tbody>
</table>

此表可能如下所示

规范值:铸件、Ann. A.S.T.M. A27-16,B级;* P 最大值 0.06;S 最大值 0.05。
等级。屈服点。抗拉强度伸长率 50.8 mm 或 2 英寸。断面收缩率。
kg/mm2lb/in2
0.45 抗拉强度56.280,0001520
0.45 抗拉强度49.270,0001825
0.45 抗拉强度42.260,0002230

以下显示了如何标记苹果公司2008财年10-K文件第46页上的毛利率表

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
  <tr>
   <th>Cost of sales
   <td>  21,334
   <td>  15,852
   <td>  13,717
 <tbody>
  <tr>
   <th>Gross margin
   <td>$ 11,145
   <td>$  8,154
   <td>$  5,598
 <tfoot>
  <tr>
   <th>Gross margin percentage
   <td>34.3%
   <td>34.0%
   <td>29.0%
</table>

此表可能如下所示

2008 2007 2006
净销售额$ 32,479 $ 24,006 $ 19,315
销售成本 21,334 15,852 13,717
毛利$ 11,145 $ 8,154 $ 5,598
毛利率34.3% 34.0% 29.0%

以下显示了如何标记同一文档同一页面下方的运营费用表

<table>
 <colgroup> <col>
 <colgroup> <col> <col> <col>
 <thead>
  <tr> <th> <th>2008 <th>2007 <th>2006
 <tbody>
  <tr> <th scope=rowgroup> Research and development
       <td> $ 1,109 <td> $ 782 <td> $ 712
  <tr> <th scope=row> Percentage of net sales
       <td> 3.4% <td> 3.3% <td> 3.7%
 <tbody>
  <tr> <th scope=rowgroup> Selling, general, and administrative
       <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
  <tr> <th scope=row> Percentage of net sales
       <td> 11.6% <td> 12.3% <td> 12.6%
</table>

此表可能如下所示

2008 2007 2006
研发费用 $ 1,109 $ 782 $ 712
净销售额百分比 3.4% 3.3% 3.7%
销售、一般和管理费用 $ 3,761 $ 2,963 $ 2,433
净销售额百分比 11.6% 12.3% 12.6%