我们可以有多个<在同一个<桌子>?

根据规范中的这个例子，可以这样做:w3-struct-tables。

表行可以分别使用THEAD、TFOOT和TBODY元素被分组为表头、表脚和一个或多个表体部分。

是的。从# EYZ0

<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

所以它需要一个或多个。它接着说

当规则时，使用多个tbody节 组与组之间是否需要表 行。< / p >

是的，你可以使用它们，例如，我用它们更容易地设置数据组的样式，像这样:

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>

# EYZ0。它只能在较新的浏览器中工作，但这是我在当前应用程序中支持的，你可以使用JavaScript等分组。最主要的是，这是一种方便的方式，可以直观地对行进行分组，使数据更具可读性。当然，还有其他用法，但就适用的示例而言，这是我最常用的用法。

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

可以提供一个按钮来在所有内容之间切换，或者通过操作tbody来切换当前日期，而不需要单独处理许多行。

# EYZ3

<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标记上搜索了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>

我创建了一个JSFiddle，其中有两个嵌套的ng-repeat表，父ng-repeat在tbody上。如果检查表中的任何一行，您将看到有六个tbody元素，即父级。

超文本标记语言

<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">&nbsp;</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>