我们可以在同一个<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的

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


,因此它期望一个或多个。然后继续说


当在表的表组之间需要规则
时,请使用多个tbody节。



评论


从HTML5规范开始,此更改略有变化,但是基本的“是的,可以使用多个tbody元素)。具体来说,现在可以根据需要将一个tfoot元素放在tbody后面。(它们整齐地避开了说不提供DTD方面。):-)

– T.J.拥挤者
13年7月11日在17:51

感谢您的回复。引用规范是我书中的第一答案。

– kernelCurry
2014年9月21日19:13在

因此,它期望一个或多个。这是错误的,它可能是一组,因此也可能是零(即tbody或tr表示它可能只是tr而没有tbody)。

– 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>元素上。

编写多头多正文表的正确方法是这样的:




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




评论


标题标签应位于开头表格标签之后。 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 楼

是。我用它们来动态隐藏/显示表的相关部分,例如一门课程。
视频


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


可以提供一个按钮,通过操纵正文而不需要单独处理许多行,即可在所有内容之间切换或仅在当天切换。

#6 楼

编辑: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技巧来使其正确呈现,因为这将违反标准。

我在caption标记上搜索了W3C标准,但找不到明确的规则指出每个表中只能有一个caption元素,但实际上就是这种情况。

#7 楼

此外,如果您通过W3C的HTML验证程序(带有HTML5 DOCTYPE)运行带有多个<tbody>标签的HTML文档,它将成功验证。

#8 楼

我创建了一个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">&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>



旁注:
如果两个级别上都有大量数据,这将填满DOM,因此我正在研究一条指令以获取数据并替换,即在单击父级并删除时添加到DOM中
要获得这种行为,您可以在Prisjakt.nu上找到,如果您向下滚动到列出的计算机并单击该行(而不是链接)。检查元素,您将看到如果再次单击父级或另一个父级,则会添加tr,然后将其删除。