<tbody>
中拥有多个<table>
标签吗?如果是,那么在什么情况下我们应该使用多个<tbody>
标签?#1 楼
是的,您可以使用它们,例如,我可以使用它们来更轻松地设置数据组的样式,例如: thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5; border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
您可以在此处查看示例。它只能在更新的浏览器中使用,但这就是我当前应用程序所支持的功能,您可以对JavaScript等使用分组。主要是,这是一种方便的方式,可以直观地对行进行分组以使数据更具可读性。当然还有其他用途,但就适用示例而言,这对我来说是最常见的一种。
评论
好的,谢谢你的回答。对屏幕阅读器来说,一个还是多个是重要的?
–吉坦德拉·维亚斯(Jitendra Vyas)
2010-6-19 18:49
@ metal-gear-solid-根据我的经验,他们可以很好地处理它们,例如:好像它们是一个。当您开始嵌套表格时,通常这会为屏幕阅读器带来实际的导航问题。
–尼克·克拉弗♦
2010-6-19 18:53
@metal:不,在语义上有所区别-如答案中所述,多个元素在表中描述了单独的组。另外,我还应该补充一点,通常最好将目标单元格设置为背景,因此CSS应该是tbody:nth-child(odd)td {background:#f5f5f5; }
–心怀不满的山羊
2010年6月21日,12:40
“新型浏览器”的定义是什么?
– Tim Down
2012年12月17日在11:07
@TimDown-当我说“较新的浏览器”时,它只是指链接演示的CSS:nth-child()用法,多个可以在任何浏览器中使用。
–尼克·克拉弗♦
2012-12-17 14:10
#2 楼
是。来自DTD的,因此它期望一个或多个。然后继续说
当在表的表组之间需要规则
时,请使用多个tbody节。
评论
从HTML5规范开始,此更改略有变化,但是基本的“是的,可以使用多个tbody元素)。具体来说,现在可以根据需要将一个tfoot元素放在tbody后面。(它们整齐地避开了说不提供DTD方面。):-)
– T.J.拥挤者
13年7月11日在17:51
感谢您的回复。引用规范是我书中的第一答案。
– kernelCurry
2014年9月21日19:13在
因此,它期望一个或多个。这是错误的,它可能是一组
– Alexis Wilke
16年1月28日在6:23
@AlexisWilke根据规范,这是正确的:始终需要TBODY开始标签,除非桌子仅包含一个桌子主体而没有桌子头或脚部分
–壁虎
16年11月2日在14:26
#3 楼
根据此示例,可以完成以下操作:w3-struct-tables。#4 楼
Martin Joiner的问题是由对<caption>
标记的误解引起的。<caption>
标记定义了表格标题。<caption>
标记必须是<table>
标记的第一个子代。每个表只能指定一个标题。
此外,请注意,应将
scope
属性放在<th>
元素上,而不是<tr>
元素上。编写多头多正文表的正确方法是这样的:
评论
标题标签应位于开头表格标签之后。 developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
–密码
2014年1月16日7:53
你是对的。我以某种方式曲解了文档。我已修正错误。
– John Slegers
2014年1月21日,9:59
规范建议对tbody标头使用scope =“ rowgroup”(而不是col)。参见示例。
– CletusW
2月12日20:22
#5 楼
是。我用它们来动态隐藏/显示表的相关部分,例如一门课程。视频
可以提供一个按钮,通过操纵正文而不需要单独处理许多行,即可在所有内容之间切换或仅在当天切换。
#6 楼
编辑:caption
标签属于表,因此应该只存在一次。不要像我一样将caption
与每个tbody
元素相关联:上面的错误示例:不要复制
上面的示例不呈现您所期望的效果,因为这样写表示对
caption
标签的误解。您将需要大量CSS技巧来使其正确呈现,因为这将违反标准。我在
caption
标记上搜索了W3C标准,但找不到明确的规则指出每个表中只能有一个caption
元素,但实际上就是这种情况。#7 楼
此外,如果您通过W3C的HTML验证程序(带有HTML5 DOCTYPE)运行带有多个<tbody>
标签的HTML文档,它将成功验证。#8 楼
我创建了一个JSFiddle,其中有两个带表的嵌套ng-repeat,以及在tbody上的父ng-repeat。如果检查表中的任何行,您将看到有六个tbody元素,即父级。HTML
(
旁注:
如果两个级别上都有大量数据,这将填满DOM,因此我正在研究一条指令以获取数据并替换,即在单击父级并删除时添加到DOM中
要获得这种行为,您可以在Prisjakt.nu上找到,如果您向下滚动到列出的计算机并单击该行(而不是链接)。检查元素,您将看到如果再次单击父级或另一个父级,则会添加tr,然后将其删除。
)