【发布时间】：2011-03-05 20:06:59
【问题描述】：
我们可以在同一个<table> 中有多个<tbody> 标签吗？如果是，那么在什么情况下我们应该使用多个<tbody> 标签？
【问题讨论】：
标签： html html-table xhtml
【发布时间】：2011-03-05 20:06:59
【问题描述】：
根据这个例子可以做到：w3-struct-tables.
【讨论】：
【讨论】：
-
在 HTML5 规范中，这略有改变，但基本的“是的，多个
tbody元素很好）仍然存在。具体来说，你现在是 allowed to put the onetfootelement after thetbodyif you like。（他们巧妙地避开了DTD 方面by saying they don't provide one.) :-) -
感谢您的回复。参考规范是我书中的第一答案。
-
所以它期望一个或多个。 这是错误的，它可能是一组
<tr>，所以它也可能是零（即tbody 或tr 表示它可能只是一个 tr 而不是 tbody。） -
@AlexisWilke 根据规范这是正确的：除非表格仅包含一个表格主体且没有表格头部或底部部分，否则始终需要 TBODY 开始标记跨度>
是的，您可以使用它们，例如，我使用它们来更轻松地设置数据组的样式，如下所示：
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>You can view an example here。它只适用于较新的浏览器，但这就是我在当前应用程序中支持的，您可以使用 JavaScript 等的分组。主要是它是一种方便的方法，可以直观地对行进行分组，使数据更具可读性.当然还有其他用途，但就适用示例而言，这一种对我来说是最常见的。
【讨论】：
-
好的，感谢您的出色回答。屏幕阅读器是一个
tbody还是多个？ -
@metal-gear-solid - 根据我的经验，他们处理得很好，例如：好像他们是一个
<tbody>。当您开始嵌套表格时，通常会给屏幕阅读器带来真正的导航问题。 -
@metal：不，存在语义差异 - 多个
<tbody>元素描述了表中的不同组，如答案中所述。另外我应该补充一点，通常以单元格为背景更好，所以 CSS 应该是，例如，tbody:nth-child(odd) td { background: #f5f5f5; } -
“较新的浏览器”的定义是什么？
-
@TimDown - 当我说“较新的浏览器”时，它仅指链接演示的 CSS
:nth-child()用法，多个<tbody>将适用于任何浏览器。
是的。我使用它们来动态隐藏/显示表格的相关部分，例如一门课程。 即。
<table>
<tbody id="day1" style="display:none">
<tr><td>session1</td><tr>
<tr><td>session2</td><tr>
</tbody>
<tbody id="day2">
<tr><td>session3</td><tr>
<tr><td>session4</td><tr>
</tbody>
<tbody id="day3" style="display:none">
<tr><td>session5</td><tr>
<tr><td>session6</td><tr>
</tbody>
</table>
可以通过操作 tbodies 来提供一个按钮来切换所有内容或仅在当前日期之间切换，而无需单独处理许多行。
【讨论】：
另外，如果你通过W3C's HTML Validator运行一个带有多个<tbody>标签的HTML文档，带有一个HTML5 DOCTYPE，它会成功验证。
【讨论】：
编辑：caption 标签属于表，因此应该只存在一次。不要像我一样将caption 与每个tbody 元素相关联：
<table>
<caption>First Half of Table (British Dinner)</caption>
<tbody>
<tr><th>1</th><td>Fish</td></tr>
<tr><th>2</th><td>Chips</td></tr>
<tr><th>3</th><td>Pease</td></tr>
<tr><th>4</th><td>Gravy</td></tr>
</tbody>
<caption>Second Half of Table (Italian Dinner)</caption>
<tbody>
<tr><th>5</th><td>Pizza</td></tr>
<tr><th>6</th><td>Salad</td></tr>
<tr><th>7</th><td>Oil</td></tr>
<tr><th>8</th><td>Bread</td></tr>
</tbody>
</table>
上面的坏例子：不要复制
上面的例子没有像你期望的那样呈现，因为这样写表示对caption标签的误解。您需要大量的 CSS hack 才能使其正确呈现，因为您将违反标准。
我在 caption 标签上搜索了 W3C 标准，但找不到明确的规则，即每个表必须只有一个 caption 元素，但事实确实如此。
【讨论】：
Martin Joiner 的问题是由于对<caption> 标签的误解造成的。
<caption> 标签定义了一个表格标题。
<caption> 标记必须是<table> 标记的第一个子标记。
每个表格只能指定一个标题。
另外，请注意scope 属性应该放在<th> 元素上，而不是<tr> 元素上。
编写多头多体表的正确方法是这样的：
<table id="dinner_table">
<caption>This is the only correct place to put a caption.</caption>
<tbody>
<tr class="header">
<th colspan="2" scope="col">First Half of Table (British Dinner)</th>
</tr>
<tr>
<th scope="row">1</th>
<td>Fish</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Chips</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Peas</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Gravy</td>
</tr>
</tbody>
<tbody>
<tr class="header">
<th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
</tr>
<tr>
<th scope="row">5</th>
<td>Pizza</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Salad</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Oil</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Bread</td>
</tr>
</tbody>
</table>【讨论】：
-
caption标签应该跟在table标签后面。 developer.mozilla.org/en-US/docs/Web/HTML/Element/table -
你是对的。我以某种方式误解了文档。我修复了错误。
-
规范建议对
tbody标头使用scope="rowgroup"（而不是col）。见Example。
我创建了一个JSFiddle，其中我有两个带有表格的嵌套 ng-repeat，以及 tbody 上的父 ng-repeat。如果您检查表中的任何行，您将看到有六个 tbody 元素，即父级。
HTML
<div>
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th>Store ID</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody data-ng-repeat="storedata in storeDataModel.storedata">
<tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
<td>{{storedata.store.storeId}}</td>
<td>{{storedata.store.storeName}}</td>
<td>{{storedata.store.storeAddress}}</td>
<td>{{storedata.store.storeCity}}</td>
<td>{{storedata.data.costTotal}}</td>
<td>{{storedata.data.salesTotal}}</td>
<td>{{storedata.data.revenueTotal}}</td>
<td>{{storedata.data.averageEmployees}}</td>
<td>{{storedata.data.averageEmployeesHours}}</td>
</tr>
<tr data-ng-show="dayDataCollapse[$index]">
<td colspan="2"> </td>
<td colspan="7">
<div>
<div class="pull-right">
<table class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th></th>
<th>Date [YYYY-MM-dd]</th>
<th>Cost</th>
<th>Sales</th>
<th>Revenue</th>
<th>Employees</th>
<th>Employees H-sum</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
<td class="pullright">
<button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
</button>
</td>
<td>{{dayData.date}}</td>
<td>{{dayData.cost}}</td>
<td>{{dayData.sales}}</td>
<td>{{dayData.revenue}}</td>
<td>{{dayData.employees}}</td>
<td>{{dayData.employeesHoursSum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
( 边注： 如果您在两个级别上都有大量数据，这会填满 DOM，因此我正在研究获取数据和替换的指令，即在单击父级时添加到 DOM 并在单击另一个或再次单击同一父级时删除。 要获得您在Prisjakt.nu 上找到的那种行为，请向下滚动到列出的计算机并单击该行（而不是链接）。如果您这样做并检查元素，您将看到添加了一个 tr，然后如果再次单击父级或另一个，则将其删除。 )
【讨论】：