HTML：活文档标准

Web 开发人员版 — 最后更新于 2024 年 9 月 12 日

1. 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 td 和 th 元素的公共属性
      12. 4.9.12 示例

4.9 表格数据

4.9.1 table 元素

类别:

流内容.

可感知内容.

可以使用此元素的上下文:

在预期 流内容 的位置。

内容模型:

按以下顺序：可选地一个 caption 元素，后跟零个或多个 colgroup 元素，后跟可选地一个 thead 元素，后跟零个或多个 tbody 元素或一个或多个 tr 元素，后跟可选地一个 tfoot 元素，可选地与一个或多个 脚本支持元素 交错。

在 text/html 中省略标签:

两个标签都不能省略。

内容属性:

全局属性

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableElement。

table 元素 表示 多维数据，以 表格 的形式。

表格具有行、列和单元格，由其后代给出。行和列形成网格；表格的单元格必须完全覆盖该网格，并且不会重叠。

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

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

使用 HTML 表格进行布局有多种替代方法，例如 CSS 网格布局、CSS 弹性盒布局（“flexbox”）、CSS 多列布局、CSS 定位和 CSS 表格模型。[CSS]

鼓励作者考虑使用下面介绍的一些 表格设计技术，使表格更容易供用户浏览。

table.caption [ = value ]

返回表格的 caption 元素。

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

caption = table.createCaption()

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

table.deleteCaption()

确保表格没有 caption 元素。

table.tHead [ = value ]

返回表格的 thead 元素。

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

thead = table.createTHead()

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

table.deleteTHead()

确保表格没有 thead 元素。

table.tFoot [ = value ]

返回表格的 tfoot 元素。

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

tfoot = table.createTFoot()

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

table.deleteTFoot()

确保表格没有 tfoot 元素。

table.tBodies

返回表格的 tbody 元素的 HTMLCollection。

tbody = table.createTBody()

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

table.rows

返回表格的 tr 元素的 HTMLCollection。

tr = table.insertRow([ index ])

创建一个 tr 元素，以及如果需要则创建一个 tbody，将它们插入到参数给出的表格位置，并返回 tr。

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

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

table.deleteRow(index)

删除表格中具有给定位置的 tr 元素。

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

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

<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>

在表格旁边，在 figure 的 figcaption 中

<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>

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

当然，最好的选择不是编写描述来解释表格的布局方式，而是调整表格以使其无需解释。

<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 来实现这些效果。

4.9.2 caption 元素

类别:

无。

可以使用此元素的上下文:

作为 table 元素的第一个元素子元素。

内容模型:

流内容，但没有后代 table 元素。

在 text/html 中省略标签:

如果 caption 元素后面没有紧跟着ASCII 空格或注释，则可以省略 caption 元素的结束标签。

内容属性:

全局属性

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableCaptionElement。

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

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

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

<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>

4.9.3 colgroup 元素

类别:

无。

可以使用此元素的上下文:

作为 table 元素的子元素，位于任何 caption 元素之后以及任何 thead、tbody、tfoot 和 tr 元素之前。

内容模型:

如果存在 span 属性：无。

如果不存在 span 属性：零个或多个 col 和 template 元素。

在 text/html 中省略标签:

如果 colgroup 元素内部的第一项是 col 元素，并且该元素前面没有紧跟着另一个 colgroup 元素（其结束标签已被省略），则可以省略 colgroup 元素的开始标签。（如果元素为空，则不能省略。）

如果 colgroup 元素后面没有紧跟着ASCII 空格或注释，则可以省略 colgroup 元素的结束标签。

内容属性:

全局属性

span — 元素所跨越的列数

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableColElement。

如果 colgroup 元素有父元素且该父元素是 table 元素，则 colgroup 元素表示其父元素 table 中的一个或多个列的组。

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

4.9.4 col 元素

类别:

无。

可以使用此元素的上下文:

作为 colgroup 元素（不具有 span 属性）的子元素。

内容模型:

无.

在 text/html 中省略标签:

没有结束标签。

内容属性:

全局属性

span — 元素所跨越的列数

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableColElement，如 colgroup 元素中所定义。

如果 col 元素有父元素且该父元素是 colgroup 元素，而该 colgroup 元素又有父元素且该父元素是 table 元素，则 col 元素表示该 colgroup 所表示的列组中的一个或多个列。

可以为该元素指定span 内容属性，其值必须是大于零且小于或等于 1000 的有效非负整数。

4.9.5 tbody 元素

类别:

无。

可以使用此元素的上下文:

作为 table 元素的子元素，位于任何 caption、colgroup 和 thead 元素之后，但仅当 table 元素的子元素中没有 tr 元素时。

内容模型:

零个或多个 tr 和支持脚本的元素。

在 text/html 中省略标签:

如果 tbody 元素内部的第一项是 tr 元素，并且该元素前面没有紧跟着 tbody、thead 或 tfoot 元素（其结束标签已被省略），则可以省略 tbody 元素的开始标签。（如果元素为空，则不能省略。）

如果 tbody 元素后面紧跟着 tbody 或 tfoot 元素，或者父元素中没有更多内容，则可以省略 tbody 元素的结束标签。

内容属性:

全局属性

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

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

如果 tbody 元素有父元素且该父元素是 table，则 tbody 元素表示父元素 table 的主体数据的一个块，该块由行组成。

tbody.rows

返回表格部分的 tr 元素的HTMLCollection。

tr = tbody.insertRow([ index ])

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

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

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

tbody.deleteRow(index)

删除表格区块中给定位置的tr 元素。

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

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

4.9.6 thead 元素

类别:

无。

可以使用此元素的上下文:

作为 table 元素的子元素，位于任何 caption 和 colgroup 元素之后，以及任何 tbody、tfoot 和 tr 元素之前，但前提是 table 元素没有其他 thead 元素作为子元素。

内容模型:

零个或多个 tr 和 支持脚本 元素。

在 text/html 中省略标签:

如果 thead 元素紧跟在 tbody 或 tfoot 元素后面，则可以省略 thead 元素的结束标签。

内容属性:

全局属性

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableSectionElement，如 tbody 元素所定义。

如果 thead 元素具有父元素且其父元素为 table，则 thead 元素表示由构成列标签（标题）以及父 table 元素的任何辅助非标题单元格组成的块 行。

<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 元素

类别:

无。

可以使用此元素的上下文:

作为 table 元素的子元素，位于任何 caption、colgroup、thead、tbody 和 tr 元素之后，但前提是 table 元素没有其他 tfoot 元素作为子元素。

内容模型:

零个或多个 tr 和 支持脚本 元素。

在 text/html 中省略标签:

如果父元素中没有更多内容，则可以省略 tfoot 元素的结束标签。

内容属性:

全局属性

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableSectionElement，如 tbody 元素所定义。

如果 tfoot 元素具有父元素且其父元素为 table，则 tfoot 元素表示由构成父 table 元素的列摘要（页脚）组成的块 行。

4.9.8 tr 元素

类别:

无。

可以使用此元素的上下文:

作为 thead 元素的子元素。

作为 tbody 元素的子元素。

作为 tfoot 元素的子元素。

作为 table 元素的子元素，位于任何 caption、colgroup 和 thead 元素之后，但前提是 table 元素没有 tbody 元素作为子元素。

内容模型:

零个或多个 td、th 和 支持脚本 元素。

在 text/html 中省略标签:

如果 tr 元素紧跟在另一个 tr 元素后面，或者如果父元素中没有更多内容，则可以省略 tr 元素的结束标签。

内容属性:

全局属性

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableRowElement。

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

tr.rowIndex

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

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

tr.sectionRowIndex

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

如果元素不在表格区块中，则返回 -1。

tr.cells

返回行的 td 和 th 元素的 HTMLCollection。

cell = tr.insertCell([ index ])

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

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

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

tr.deleteCell(index)

删除行中给定位置的 td 或 th 元素。

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

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

4.9.9 td 元素

类别:

无。

可以使用此元素的上下文:

作为 tr 元素的子元素。

内容模型:

流内容.

在 text/html 中省略标签:

如果 td 元素紧跟在 td 或 th 元素后面，或者如果父元素中没有更多内容，则可以省略 td 元素的结束标签。

内容属性:

全局属性

colspan — 单元格要跨越的列数

rowspan — 单元格要跨越的行数

headers — 此单元格的标题单元格

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableCellElement。HTMLTableCellElement 接口也用于 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 元素

类别:

无。

可以使用此元素的上下文:

作为 tr 元素的子元素。

内容模型:

流内容，但不包含 header、footer、分节内容 或 标题内容 后代。

在 text/html 中省略标签:

如果 th 元素紧跟在 td 或 th 元素后面，或者如果父元素中没有更多内容，则可以省略 th 元素的结束标签。

内容属性:

全局属性

colspan — 单元格要跨越的列数

rowspan — 单元格要跨越的行数

headers — 此单元格的标题单元格

scope — 指定表头单元格应用于哪些单元格

abbr — 在其他上下文中引用表头单元格时使用的替代标签

辅助功能注意事项:

供作者使用.

供实现者使用.

DOM 接口:

使用 HTMLTableCellElement，如 td 元素所定义。

th 元素表示 表格中的表头单元格。

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

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

该属性的缺失值默认值和无效值默认值均为auto状态。（在此状态下，表头单元格应用于基于上下文选择的一组单元格。）

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

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

以下示例显示了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 td和th元素的通用属性

td和th元素可以具有指定的colspan内容属性，其值必须大于零且小于或等于1000的有效非负整数。

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

这些属性分别给出单元格要跨越的列数和行数。这些属性不得用于重叠单元格。

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

具有IDid的th元素被称为被同一表格中所有具有headers属性的td和th元素直接目标，这些属性的值包含IDid作为其标记之一。如果A被B直接目标，或者如果存在一个元素C，它本身被元素B目标并且A被C直接目标，则th元素A被称为被th或td元素B目标。

th元素不得被自身目标。

cell.cellIndex

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

如果元素不在行中，则返回 -1。

4.9.12 示例

以下显示了如何标记史密森物理表，第 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>

此表格可能如下所示

以下显示了如何标记 Apple 公司 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>

此表格可能如下所示

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

<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>

此表格可能如下所示