我们可以在同一个 <table> 中有多个 <tbody> 标签吗?如果是,那么在什么情况下我们应该使用多个 <tbody> 标签?
<table>
<tbody>
此外,如果您通过带有HTML5 DOCTYPE的W3C's HTML Validator运行带有多个 <tbody> 标记的HTML文档,它将成功验证 .
是的,您可以使用它们,例如我使用它们来更轻松地设置数据组样式,如下所示:
<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>
然后你可以轻松地设置它们,如下所示:
tbody:nth-child(odd) { background: #f5f5f5; } tbody:nth-child(even) { background: #e5e5e5; }
You can view an example here,它'll only work in newer browsers...but that'是一种方便的方式,可以直观地对行进行分组,使数据更具可读性 . 当然还有其他用途,但就适用的例子而言,这个是我最常用的例子 .
是 . 来自the DTD
<!ELEMENT table (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
所以它期望一个或多个 . 然后继续说
在表行组之间需要规则时,使用多个tbody节 .
根据这个例子,它可以完成:w3-struct-tables .
Martin Joiner的问题是由对 <caption> 标签的误解引起的 .
<caption>
<caption> 标记定义表格 Headers .
<caption> 标记必须是 <table> 标记的第一个子标记 .
您只能为每个表指定一个 Headers .
另请注意, scope 属性应放在 <th> 元素上,而不应放在 <tr> 元素上 .
scope
<th>
<tr>
编写多头多tbody表的正确方法是这样的:
<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>
可以提供一个按钮,通过操作tbodies而无需单独处理多行来在所有内容之间切换或仅切换当前日期 .
EDIT: The caption tag belongs to table and thus should only exist once. Do not associate a caption with each tbody element like I did:
<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>
BAD EXAMPLE ABOVE: DO NOT COPY
上面的例子没有像你期望的那样呈现,因为这样的写法表明了对 caption 标签的误解 . 你需要大量的CSS黑客来使它正确渲染,因为你会违反标准 .
caption
我在 caption 标签上搜索了W3Cs标准,但找不到明确规则,表明每个表必须只有一个 caption 元素,但事实上就是这种情况 .
我创建了一个JSFiddle,其中我有两个嵌套的ng-repeats与表,以及父本ng-repeat on tbody . 如果检查表中的任何行,您将看到有六个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然后被删除如果再次点击父母或另一个 . )
8 回答
此外,如果您通过带有HTML5 DOCTYPE的W3C's HTML Validator运行带有多个
<tbody>
标记的HTML文档,它将成功验证 .是的,您可以使用它们,例如我使用它们来更轻松地设置数据组样式,如下所示:
然后你可以轻松地设置它们,如下所示:
You can view an example here,它'll only work in newer browsers...but that'是一种方便的方式,可以直观地对行进行分组,使数据更具可读性 . 当然还有其他用途,但就适用的例子而言,这个是我最常用的例子 .
是 . 来自the DTD
所以它期望一个或多个 . 然后继续说
根据这个例子,它可以完成:w3-struct-tables .
Martin Joiner的问题是由对
<caption>
标签的误解引起的 .<caption>
标记定义表格 Headers .<caption>
标记必须是<table>
标记的第一个子标记 .您只能为每个表指定一个 Headers .
另请注意,
scope
属性应放在<th>
元素上,而不应放在<tr>
元素上 .编写多头多tbody表的正确方法是这样的:
是 . 我使用它们动态隐藏/显示表格的相关部分,例如一门课程 . 即
可以提供一个按钮,通过操作tbodies而无需单独处理多行来在所有内容之间切换或仅切换当前日期 .
EDIT: The caption tag belongs to table and thus should only exist once. Do not associate a caption with each tbody element like I did:
BAD EXAMPLE ABOVE: DO NOT COPY
上面的例子没有像你期望的那样呈现,因为这样的写法表明了对
caption
标签的误解 . 你需要大量的CSS黑客来使它正确渲染,因为你会违反标准 .我在
caption
标签上搜索了W3Cs标准,但找不到明确规则,表明每个表必须只有一个caption
元素,但事实上就是这种情况 .我创建了一个JSFiddle,其中我有两个嵌套的ng-repeats与表,以及父本ng-repeat on tbody . 如果检查表中的任何行,您将看到有六个tbody元素,即父级 .
HTML
(旁注:如果你在两个级别上都有很多数据,这会填满DOM,所以我正在制定一个指令来获取数据并替换,即在点击父级时添加到DOM中,当点击另一个或同一个父级时删除为了获得在Prisjakt.nu上找到的行为,如果向下滚动到列出的计算机并单击行(而不是链接) . 如果这样做并检查元素,您将看到添加了tr然后被删除如果再次点击父母或另一个 . )