活文档 — 最后更新于 2024 年 9 月 12 日
table
元素所有当前引擎都支持。
所有当前引擎都支持。
caption
元素,后面跟着零个或多个 colgroup
元素,后面可选地跟着一个 thead
元素,后面跟着零个或多个 tbody
元素或一个或多个 tr
元素,后面可选地跟着一个 tfoot
元素,可选地与一个或多个 脚本支持元素 交织在一起。[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 | 可能是一个布局表格 |
使用不符合标准的 cellspacing 和 cellpadding 属性,其值为 0 | 可能是一个布局表格 |
使用 caption 、thead 或 th 元素 | 可能是一个非布局表格 |
使用 headers 和 scope 属性 | 可能是一个非布局表格 |
使用不符合标准的 border 属性,其值不为 0 | 可能是一个非布局表格 |
使用 CSS 设置显式可见边框 | 可能是一个非布局表格 |
使用 summary 属性 | 不是一个好的指标(布局和非布局表格历史上都使用了此属性) |
上述建议很可能是不正确的。敦促实现者提供反馈,详细说明他们尝试创建布局表格检测启发式方法的经验。
如果 table
元素具有(不符合标准的)summary
属性,并且用户代理未将表格分类为布局表格,则用户代理可能会将该属性的内容报告给用户。
table.caption [ = value ]
所有当前引擎都支持。
返回表格的 caption
元素。
可以设置,以替换 caption
元素。
caption = table.createCaption()
HTMLTableElement/createCaption
所有当前引擎都支持。
确保表格具有 caption
元素,并返回它。
table.deleteCaption()
HTMLTableElement/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
所有当前引擎都支持。
返回表格的 HTMLCollection
的 tbody
元素。
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
异常。
在以下所有属性和方法定义中,当一个元素需要被 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
元素的子节点或 thead
、tbody
或 tfoot
元素(它们本身是 table
元素的子节点)的子节点的 tr
元素。集合中的元素必须按顺序排列,其中父节点为 thead
的元素首先包含在内,按 树形顺序排列,然后是父节点为 table
或 tbody
元素的元素,同样按 树形顺序排列,最后是父节点为 tfoot
元素的元素,仍然按 树形顺序排列。
insertRow(index)
方法的行为取决于表格的状态。当调用该方法时,该方法必须根据描述表格状态和 index 参数的以下条件列表中的第一项的要求执行
rows
集合中元素的数量IndexSizeError
" DOMException
。rows
集合中没有元素,并且table
中没有tbody
元素tbody
元素,然后table-create 一个tr
元素,然后将tr
元素追加到tbody
元素中,然后将tbody
元素追加到table
元素中,最后返回tr
元素。rows
集合中没有元素tr
元素,将其追加到表格中最后一个tbody
元素,并返回tr
元素。rows
集合中项目的数量tr
元素,并将其追加到rows
集合中最后一个tr
元素的父元素。然后,必须返回新创建的tr
元素。tr
元素,将其插入到rows
集合中第index个tr
元素的前面,在同一个父元素中,最后必须返回新创建的tr
元素。当调用deleteRow(index)
方法时,用户代理必须执行以下步骤
如果index 小于 -1 或大于或等于rows
集合中元素的数量,则抛出一个"IndexSizeError
" DOMException
。
如果index 为 -1,则从其父元素中移除rows
集合中的最后一个元素,或者如果rows
集合为空则不执行任何操作。
这是一个使用表格标记数独谜题的示例。请注意缺少标题,在这样的表格中不需要标题。
< style >
# sudoku { border-collapse : collapse ; border : solid thick ; }
# sudoku colgroup , table # sudoku tbody { border : solid medium ; }
# sudoku td { border : solid thin ; height : 1.4 em ; width : 1.4 em ; 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 >
对于不仅仅由带标题的第一行和带标题的第一列的单元格网格组成的表格,以及对于读者可能难以理解内容的任何表格,作者应包含介绍表格的解释性信息。此信息对所有用户都有用,但对于无法查看表格的用户(例如屏幕阅读器用户)尤其有用。
此类解释性信息应介绍表格的目的,概述其基本单元格结构,突出任何趋势或模式,并通常指导用户如何使用表格。
例如,下表
负面 | 特征 | 正面 |
---|---|---|
悲伤 | 情绪 | 快乐 |
不及格 | 等级 | 及格 |
……可能受益于解释表格布局方式的描述,例如“特征在第二列中给出,左侧列为负面,右侧列为正面”。
有多种方法可以包含此信息,例如
< 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 >
作者还可以根据需要使用其他技术或上述技术的组合。
当然,最好的选择不是编写解释表格布局方式的描述,而是调整表格,以便不需要解释。
在上面示例中使用的表格的情况下,简单地重新排列表格,使标题位于顶部和左侧,消除了对解释的需求,也消除了对使用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 >
良好的表格设计是使表格更易读和更易用的关键。
在视觉媒体中,提供列和行边框以及交替的行背景可以非常有效地使复杂的表格更易读。
对于包含大量数字内容的表格,使用等宽字体可以帮助用户查看模式,尤其是在用户代理不呈现边框的情况下。(不幸的是,由于历史原因,不呈现表格边框是一种常见的默认设置。)
在语音媒体中,可以通过在读取单元格内容之前报告相应的标题来区分表格单元格,并允许用户以网格方式导航表格,而不是按源顺序序列化表格的全部内容。
鼓励作者使用 CSS 来实现这些效果。
鼓励用户代理在页面不使用 CSS 且表格未被分类为布局表格时,使用这些技术呈现表格。
caption
元素所有当前引擎都支持。
所有当前引擎都支持。
table
元素的第一个元素子元素。table
元素。caption
元素后面没有紧跟着ASCII 空格或注释,则可以省略caption
元素的结束标签。[Exposed =Window ]
interface HTMLTableCaptionElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
如果caption
元素有父元素且该父元素是table
元素,则caption
元素表示其父元素table
的标题。
当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 | 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 |
colgroup
元素所有当前引擎都支持。
所有当前引擎都支持。
table
元素的子元素,位于任何caption
元素之后以及任何thead
、tbody
、tfoot
和tr
元素之前。span
属性:无。span
属性:零个或多个col
和template
元素。col
元素是colgroup
元素中的第一个内容,并且该元素前面没有紧跟着另一个colgroup
元素(其结束标签已被省略),则可以省略colgroup
元素的开始标签。(如果该元素为空,则不能省略。)
colgroup
` 元素后面没有紧跟着ASCII 空格或注释,则可以省略`colgroup
` 元素的结束标签。span
— 元素所跨列数[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。
col
` 元素所有当前引擎都支持。
colgroup
` 元素的子元素,且该`colgroup
` 元素没有`span
` 属性。span
— 元素所跨列数HTMLTableColElement
`,其定义与`colgroup
` 元素相同。如果`col
` 元素有父元素且该父元素是`colgroup
` 元素,并且该`colgroup
` 元素的父元素是`table
` 元素,则`col
` 元素表示该`colgroup
` 所表示的列组中的一列或多列。
该元素可以指定一个span
内容属性,其值必须是大于 0 且小于或等于 1000 的有效非负整数。
tbody
` 元素所有当前引擎都支持。
所有当前引擎都支持。
table
` 元素的子元素,位于任何`caption
`、`colgroup
` 和`thead
` 元素之后,但前提是`table
` 元素没有`tr
` 元素作为其子元素。tr
` 和脚本支持元素。tbody
` 元素中的第一个元素是`tr
` 元素,并且该元素前面没有紧跟着`tbody
`、`thead
` 或`tfoot
` 元素(其结束标签已被省略),则可以省略`tbody
` 元素的开始标签。(如果该元素为空,则不能省略)。tbody
` 元素后面紧跟着`tbody
` 或`tfoot
` 元素,或者父元素中没有更多内容,则可以省略`tbody
` 元素的结束标签。[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.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)
方法必须按如下方式操作
如果index小于 -1 或大于rows
集合中的元素数,则抛出"IndexSizeError
" DOMException
。
返回table row。
deleteRow(index)
方法在调用时必须按如下方式操作
如果index小于 -1 或大于或等于rows
集合中的元素数,则抛出"IndexSizeError
" DOMException
。
thead
` 元素所有当前引擎都支持。
table
` 元素的子元素,位于任何`caption
` 和`colgroup
` 元素之后,并且位于任何`tbody
`、`tfoot
` 和`tr
` 元素之前,但前提是`table
` 元素没有其他`thead
` 元素作为其子元素。tr
元素和 脚本支持 元素。thead
元素紧跟着一个 tbody
或 tfoot
元素,则可以省略 thead
元素的 结束标签。HTMLTableSectionElement
,如 tbody
元素所定义。如果 thead
元素有父元素且该父元素为 table
,则 thead
元素 表示 由列标签(标题)和父 table
元素的任何辅助非标题单元格组成的 块 行。
此示例显示了 thead
元素的使用。请注意 th
和 td
元素在 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 >
tfoot
元素所有当前引擎都支持。
table
元素的子元素,位于任何 caption
、colgroup
、thead
、tbody
和 tr
元素之后,但前提是 table
元素没有其他 tfoot
元素作为子元素。tr
元素和 脚本支持 元素。tfoot
元素的 结束标签。HTMLTableSectionElement
,如 tbody
元素所定义。如果 tfoot
元素有父元素且该父元素为 table
,则 tfoot
元素 表示 由列汇总(页脚)组成的 块 行,用于父 table
元素。
tr
元素所有当前引擎都支持。
所有当前引擎都支持。
thead
元素的子元素。tbody
元素的子元素。tfoot
元素的子元素。table
元素的子元素,位于任何 caption
、colgroup
和 thead
元素之后,但前提是 table
元素没有 tbody
元素作为子元素。td
、th
元素和 脚本支持 元素。tr
元素紧跟着另一个 tr
元素,或者父元素中没有更多内容,则可以省略 tr
元素的 结束标签。[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.rowIndex
所有当前引擎都支持。
返回行在表格的 rows
列表中的位置。
如果元素不在表格中,则返回 -1。
tr.sectionRowIndex
返回行在表格部分的 rows
列表中的位置。
如果元素不在表格部分中,则返回 -1。
tr.cells
返回行的 td
和 th
元素的 HTMLCollection
。
cell = tr.insertCell([ index ])
HTMLTableRowElement/insertCell
所有当前引擎都支持。
创建一个 td
元素,将其插入到表格行的参数给定的位置,并返回该 td
。
该位置相对于行中的单元格。索引 -1(如果省略参数,则为默认值)等效于插入到行的末尾。
如果给定的位置小于 -1 或大于单元格数,则抛出 "IndexSizeError
" DOMException
。
tr.deleteCell(index)
该位置相对于行中的单元格。索引 -1 等效于删除行的最后一个单元格。
如果给定的位置小于 -1 或大于最后一个单元格的索引,或者如果没有单元格,则抛出 "IndexSizeError
" DOMException
。
如果此元素有父 table
元素,或者有父 tbody
、thead
或 tfoot
元素以及 祖父母 table
元素,则 rowIndex
属性必须返回此 tr
元素在该 table
元素的 rows
集合中的索引。如果没有这样的 table
元素,则该属性必须返回 -1。
如果此元素有父 table
、tbody
、thead
或 tfoot
元素,则 sectionRowIndex
属性必须返回 tr
元素在父元素的 rows
集合中的索引(对于表格,即 HTMLTableElement
的 rows
集合;对于表格部分,即 HTMLTableSectionElement
的 rows
集合)。如果没有这样的父元素,则该属性必须返回 -1。
cells
属性必须返回一个以此 tr
元素为根的 HTMLCollection
,其过滤器仅匹配 tr
元素的子元素 td
和 th
元素。
insertCell(index)
方法必须按如下方式执行
如果 index 小于 -1 或大于 cells
集合中元素的数量,则抛出 "IndexSizeError
" DOMException
。
否则,插入 table cell 作为此 tr
元素的子元素,紧接在 cells
集合中的第 index 个 td
或 th
元素之前。
返回 table cell。
deleteCell(index)
方法必须按以下方式执行
如果 index 小于 −1 或大于或等于 cells
集合中元素的数量,则抛出一个 "IndexSizeError
" DOMException
。
如果 index 等于 −1,则从其父级中 移除 cells
集合中的最后一个元素,或者如果 cells
集合为空,则不执行任何操作。
td
元素所有当前引擎都支持。
所有当前引擎都支持。
tr
元素的子元素。td
元素紧跟着一个 td
或 th
元素,或者父元素中没有更多内容,则可以省略 td
元素的 结束标签。colspan
— 单元格要跨越的列数rowspan
— 单元格要跨越的行数headers
— 此单元格的标题单元格[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
元素及其 colspan
、rowspan
和 headers
属性参与 表格模型。
用户代理,尤其是在非视觉环境或将表格显示为二维网格不切实际的情况下,可能会在呈现单元格内容时为用户提供单元格的上下文;例如,给出其在 表格模型 中的位置,或列出单元格的标题单元格(由 分配标题单元格的算法 确定)。当列出单元格的标题单元格时,用户代理可能会使用这些标题单元格上的 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 >
th
元素所有当前引擎都支持。
tr
元素的子元素。header
、footer
、分段内容 或 标题内容 后代。th
元素紧跟着一个 td
或 th
元素,或者父元素中没有更多内容,则可以省略 th
元素的 结束标签。colspan
— 单元格要跨越的列数rowspan
— 单元格要跨越的行数headers
— 此单元格的标题单元格scope
— 指定标题单元格应用于哪些单元格abbr
— 在其他上下文中引用单元格时使用的备用标签HTMLTableCellElement
,如 td
元素中定义的那样。th
元素可以指定 scope
内容属性。
scope
属性是一个 枚举属性,具有以下关键字和状态
关键字 | 状态 | 简要描述 |
---|---|---|
row
| row | 标题单元格应用于同一行(或多行)中的一些后续单元格。 |
col
| column | 标题单元格应用于同一列(或多列)中的一些后续单元格。 |
rowgroup
| row group | 标题单元格应用于行组中所有剩余的单元格。 |
colgroup
| column group | 标题单元格应用于列组中所有剩余的单元格。 |
属性的 缺失值默认值 和 无效值默认值 均为 auto 状态。(在此状态下,标题单元格应用于根据上下文选择的单元格集。)
如果元素未锚定在 行组 中,则 th
元素的 scope
属性不得处于 row group 状态;如果元素未锚定在 列组 中,则不得处于 column group 状态。
th
元素可以指定 abbr
内容属性。其值必须是标题单元格的备用标签,在其他上下文中引用单元格时使用(例如,在描述应用于数据单元格的标题单元格时)。它通常是完整标题单元格的缩写形式,但也可能是扩展,或者仅仅是不同的措辞。
th
元素及其 colspan
、rowspan
、headers
和 scope
属性参与 表格模型。
以下示例显示了 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
状态的标题应用于其行组中的所有单元格,但不包括第一列中的单元格。
其余标题仅应用于其右侧的单元格。
td
和 th
元素的公共属性td
和 th
元素可以指定 colspan
内容属性,其值必须是大于零且小于或等于 1000 的 有效非负整数。
td
和 th
元素还可以指定 rowspan
内容属性,其值必须是小于或等于 65534 的 有效非负整数。对于此属性,值零表示单元格要跨越行组中所有剩余的行。
这些属性分别给出单元格要跨越的列数和行数。这些属性不得用于重叠单元格,如 表格模型 的描述中所述。
td
和 th
元素可以指定 headers
内容属性。如果指定了 headers
属性,则它必须包含一个字符串,该字符串由 一组无序的唯一空格分隔的标记 组成,这些标记中没有一个与另一个标记 相同,并且每个标记都必须具有参与与 td
或 th
元素相同 表格 的 th
元素的 ID 值(由 表格模型 定义)。
如果一个具有 th 元素的 th
元素具有 ID id,则该 th 元素被称为被同一 table 中所有具有 headers
属性的 td
和 th
元素 直接关联,且这些 headers
属性的值包含 ID id 作为其标记之一。如果一个 th
元素 A 被一个 th
或 td
元素 B 关联,则意味着要么 A 被 B 直接关联,要么存在一个元素 C,它本身被元素 B 关联,并且 A 被 C 直接关联。
一个 th
元素不能被自身关联。
colspan
、rowspan
和 headers
属性参与 表格模型。
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 属性必须 反映 同名内容属性。
各种表格元素及其内容属性共同定义了 表格模型。
一个 表格 由位于具有坐标 (x, y) 的二维 槽 网格上的单元格组成。网格是有限的,并且要么为空,要么具有一个或多个槽。如果网格具有一个或多个槽,则 x 坐标始终在范围 0 ≤ x < xwidth 内,y 坐标始终在范围 0 ≤ y < yheight 内。如果 xwidth 和 yheight 中的一个或两个为零,则表格为空(没有槽)。表格对应于 table
元素。
一个 单元格 是一组锚定在槽 (cellx, celly) 上且具有特定 width 和 height 的槽,使得单元格覆盖所有具有坐标 (x, y) 的槽,其中 cellx ≤ x < cellx+width 且 celly ≤ 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 < xwidth 且 groupy ≤ y < groupy+height。行组对应于 tbody
、thead
和 tfoot
元素。并非每一行都一定在行组中。
一个 列组 是一组锚定在槽 (groupx, 0) 上且具有特定 width 的 列,使得列组覆盖所有具有坐标 (x, y) 的槽,其中 groupx ≤ x < groupx+width 且 0 ≤ y < yheight。列组对应于 colgroup
元素。并非每一列都一定在列组中。
一个 单元格 不能覆盖来自两个或多个 行组 的槽。但是,一个单元格可能存在于多个 列组 中。构成一个单元格的所有槽都属于零个或一个 行组 和零个或多个 列组。
除了 单元格、列、行、行组 和 列组 之外,表格 还可以具有与其关联的 caption
元素。这为表格提供了一个标题或图例。
一个 表格模型错误 是由 table
元素及其后代表示的数据的错误。文档不得包含表格模型错误。
为了确定哪些元素对应于与 table
元素关联的 表格 中的哪些槽,以确定表格的尺寸 (xwidth 和 yheight),并确定是否存在任何 表格模型错误,用户代理必须使用以下算法
令 xwidth 为零。
令 yheight 为零。
令 表格 为 table
元素所表示的 表格。变量 xwidth 和 yheight 给出了 表格 的尺寸。表格 最初为空。
如果 table
元素没有子元素,则返回 表格(它将为空)。
将 table
元素的第一个 caption
元素子元素与 表格 关联。如果没有这样的子元素,则它没有关联的 caption
元素。
令 当前元素 为 table
元素的第一个元素子元素。
如果此算法中的某个步骤需要在没有下一个子元素时将 当前元素 前进到 table
的下一个子元素,则用户代理必须跳转到标记为结束的步骤,该步骤位于此算法的末尾附近。
如果 当前元素 是一个 colgroup
,请遵循以下子步骤
列组:根据以下适当的情况处理 当前元素
col
元素子元素遵循以下步骤
令 xstart 的值为 xwidth。
列:如果当前列col
元素具有span
属性,则使用解析非负整数的规则解析其值。
如果解析结果不是错误或零,则令span为该值。
否则,如果col
元素没有span
属性,或者尝试解析属性值导致错误或零,则令span为1。
如果span大于1000,则将其改为1000。
将xwidth增加span。
令表格中最后的span列对应于当前列col
元素。
如果当前列不是colgroup
元素的最后一个col
元素子节点,则令当前列为colgroup
元素的下一个col
元素子节点,并返回到标记为列的步骤。
令表格中从x=xstart到x=xwidth-1的所有最后一列形成一个新的列组,锚定在插槽(xstart, 0)处,宽度为xwidth-xstart,对应于colgroup
元素。
col
元素子节点如果当前元素是colgroup
元素,则跳转到上面标记为列组的步骤。
令ycurrent为零。
令向下增长的单元格列表为空列表。
运行结束行组的算法。
如果当前元素是tfoot
,则将该元素添加到挂起的tfoot
元素列表中,前进到当前元素到table
的下一个子节点,并返回到标记为行的步骤。
运行处理行组的算法。
返回到标记为行的步骤。
返回表格。
上面步骤集中用于处理thead
、tbody
和tfoot
元素的处理行组的算法是
令ystart的值为yheight。
如果yheight > ystart,则令表格中从y=ystart到y=yheight-1的所有最后一行形成一个新的行组,锚定在坐标为(0, ystart)的插槽处,高度为yheight-ystart,对应于正在处理的元素。
运行结束行组的算法。
上面步骤集中在开始和结束一行块时调用的结束行组的算法是
当ycurrent小于yheight时,执行以下步骤
将ycurrent增加1。
清空向下增长的单元格列表。
上面步骤集中用于处理tr
元素的处理行的算法是
如果yheight等于ycurrent,则将yheight增加1。(ycurrent永远不会大于yheight。)
令xcurrent为0。
单元格:当xcurrent小于xwidth且坐标为(xcurrent, ycurrent)的插槽已分配给单元格时,将xcurrent增加1。
如果xcurrent等于xwidth,则将xwidth增加1。(xcurrent永远不会大于xwidth。)
如果当前单元格具有colspan
属性,则解析该属性的值,并令colspan为结果。
如果解析该值失败,或返回零,或属性不存在,则改为令colspan为1。
如果colspan大于1000,则将其改为1000。
如果当前单元格具有rowspan
属性,则解析该属性的值,并令rowspan为结果。
如果解析该值失败或属性不存在,则改为令rowspan为1。
如果rowspan大于65534,则将其改为65534。
如果rowspan为零且table
元素的节点文档未设置为怪癖模式,则令单元格向下增长为true,并将rowspan设置为1。否则,令单元格向下增长为false。
如果xwidth < xcurrent+colspan,则令xwidth为xcurrent+colspan。
如果yheight < ycurrent+rowspan,则令yheight为ycurrent+rowspan。
令坐标为(x, y)且满足xcurrent ≤ x < xcurrent+colspan和ycurrent ≤ y < ycurrent+rowspan的插槽被一个新的单元格c覆盖,锚定在(xcurrent, ycurrent)处,宽度为colspan,高度为rowspan,对应于当前单元格元素。
如果当前单元格元素是th
元素,则令此新单元格c为标题单元格;否则,令其为数据单元格。
要确定哪些标题单元格应用于当前单元格元素,请使用下一节中描述的分配标题单元格的算法。
如果`单元格向下扩展`为真,则将元组{c,xcurrent,colspan}添加到`向下扩展单元格列表`中。
将xcurrent增加colspan。
如果`当前单元格`是正在处理的`tr
`元素的最后一个`td
`或`th
`元素子节点,则将ycurrent增加1,中止此步骤集,并返回到上述算法。
返回到标记为cells的步骤。
当上述算法要求用户代理运行`向下扩展单元格扩展算法`时,用户代理必须对`向下扩展单元格列表`中的每个{单元格,cellx,width}元组(如果有)进行扩展,使单元格单元格还覆盖坐标为(x,ycurrent)的槽,其中cellx ≤ x < cellx+width。
每个单元格可以分配零个或多个标题单元格。将`标题单元格分配算法`分配给单元格主体单元格的步骤如下。
令标题列表为空的单元格列表。
令(principalx,principaly)为主体单元格所锚定的槽的坐标。
headers
`属性获取主体单元格的`headers
`属性的值,并按ASCII空格拆分它,令id列表为获得的标记列表。
对于id列表中的每个标记,如果`Document
`中具有与标记相等的`ID`的第一个元素是同一`表格`中的单元格,并且该单元格不是主体单元格,则将该单元格添加到标题列表中。
headers
`属性令principalwidth为主体单元格的宽度。
令principalheight为主体单元格的高度。
对于从principaly到principaly+principalheight-1的每个y值,运行`扫描和分配标题单元格的内部算法`,使用主体单元格、标题列表、初始坐标(principalx,y)以及增量Δx=−1和Δy=0。
对于从principalx到principalx+principalwidth-1的每个x值,运行`扫描和分配标题单元格的内部算法`,使用主体单元格、标题列表、初始坐标(x,principaly)以及增量Δx=0和Δy=−1。
如果主体单元格锚定在`行组`中,则将所有作为`行组标题`且锚定在同一行组中,并且x坐标小于或等于principalx+principalwidth-1且y坐标小于或等于principaly+principalheight-1的标题单元格添加到标题列表中。
如果主体单元格锚定在`列组`中,则将所有作为`列组标题`且锚定在同一列组中,并且x坐标小于或等于principalx+principalwidth-1且y坐标小于或等于principaly+principalheight-1的标题单元格添加到标题列表中。
从标题列表中删除所有`空单元格`。
从标题列表中删除任何重复项。
如果主体单元格存在于标题列表中,则将其删除。
将标题列表中的标题分配给主体单元格。
给定主体单元格、标题列表、初始坐标(initialx,initialy)以及Δx和Δy增量,`扫描和分配标题单元格的内部算法`的步骤如下
令x等于initialx。
令y等于initialy。
令不透明标题为空的单元格列表。
令在标题块中为真,并令当前标题块中的标题为仅包含主体单元格的单元格列表。
令在标题块中为假,并令当前标题块中的标题为空的单元格列表。
循环:将x增加Δx;将y增加Δy。
对于此算法的每次调用,Δx和Δy之一将为−1,另一个将为0。
如果x或y小于0,则中止此内部算法。
如果没有单元格覆盖槽(x,y),或者有多个单元格覆盖槽(x,y),则返回到标记为loop的子步骤。
令当前单元格为覆盖槽(x,y)的单元格。
将在标题块中设置为假。将当前标题块中的标题中的所有单元格添加到不透明标题列表中,并清空当前标题块中的标题列表。
返回到标记为loop的步骤。
如果满足以下任何条件,则称锚定在坐标为(x,y)、宽度为width且高度为height的槽中的标题单元格为`列标题`
如果满足以下任何条件,则称锚定在坐标为(x,y)、宽度为width且高度为height的槽中的标题单元格为`行标题`
如果其`scope
`属性处于`column group`状态,则称标题单元格为`列组标题`。
如果其`scope
`属性处于`row group`状态,则称标题单元格为`行组标题`。
如果单元格不包含任何元素,并且其`子文本内容`(如果有)仅由`ASCII空格`组成,则称该单元格为`空单元格`。
本节是非规范性的。
以下显示了如何标记史密森物理表,第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 mm or 2 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 >
此表可能如下所示
等级。 | 屈服点。 | 抗拉强度 | 伸长率 50.8 mm 或 2 英寸。 | 断面收缩率。 | |
---|---|---|---|---|---|
kg/mm2 | lb/in2 | ||||
硬 | 0.45 抗拉强度 | 56.2 | 80,000 | 15 | 20 |
中 | 0.45 抗拉强度 | 49.2 | 70,000 | 18 | 25 |
软 | 0.45 抗拉强度 | 42.2 | 60,000 | 22 | 30 |
以下显示了如何标记苹果公司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% |