我们可以<tbody>在同一标签中包含多个标签<table>吗？如果是，那么在什么情况下我们应该使用多个<tbody>标签？
我们可以<tbody>在同一标签中包含多个标签<table>吗？如果是，那么在什么情况下我们应该使用多个<tbody>标签？
Answers:
是的，您可以使用它们，例如，我可以使用它们来更轻松地设置数据组的样式，如下所示：
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等使用分组。主要是，这是一种方便的方式，可以直观地对行进行分组以使数据更具可读性。当然还有其他用途，但就适用示例而言，这对我来说是最常见的一种。
<tbody>。当您开始嵌套表格时，通常这会为屏幕阅读器带来实际的导航问题。
<tbody>如答案中所述，多个元素在表中描述了单独的组。另外，我还应该补充一点，通常最好是将背景定位到单元格，因此CSS应该是，例如，tbody:nth-child(odd) td { background: #f5f5f5; }
:nth-child()链接演示的CSS 用法，多种<tbody>浏览器都可以使用。
是。从DTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>因此，它期望一个或多个。然后继续说
当 在表行组之间需要规则时，请使用多个正文部分。
tbody元素的罚款）仍然存在。特别是，你现在允许在一个把tfoot元素后的tbody，如果你喜欢。（他们整齐地向旁边跨步的DTD方面说他们不提供一个。）:-)
<tr>所以也可能是零（例如，一个tbody或tr表示它可能只是一个tr而没有tbody。）
根据这个例子可以做到：w3-struct-tables。
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>是。我使用它们来动态隐藏/显示表的相关部分，例如课程。就是
<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>可以提供一个按钮，以通过操纵正文而不在单独处理很多行的情况下在所有内容之间切换或仅在当天切换。
编辑：caption标记属于表，因此应该只存在一次。不要像我一样将a 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技巧来使其正确呈现，因为这将违反标准。
我在caption标记上搜索了W3Cs标准，但找不到明确的规则来指出caption每个表中只能有一个元素，但实际上就是这种情况。
此外，如果您<tbody>通过W3C的HTML验证程序（带有HTML5 DOCTYPE）运行带有多个标签的HTML文档，它将成功进行验证。
我创建了一个JSFiddle，其中有两个带表的嵌套ng-repeats，以及在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并如果再次单击父对象或其他对象，则将其删除。）
tbody或多个是重要的吗？