我们可以在同一个<table>中有多个<tbody>吗？

Question

我们可以<tbody>同时拥有多个标签<table>吗？如果是,那么在什么情况下我们应该使用多个<tbody>标签？

Answer 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等分组.主要的是它是一种方便的视觉组合方式行使数据更具可读性.当然还有其他用途,但就适用的例子而言,这个是我最常用的例子.

Answer 2

是.来自DTD

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

所以它期望一个或多个.然后继续说

在表行组之间需要规则时,请使用多个tbody节.

Answer 3

根据这个例子,它可以完成:w3-struct-tables.

Answer 4

Martin Joiner的问题是由于对<caption>标签的误解造成的.

该<caption>标签定义表格标题.

该<caption>标签必须是第一子<table>标签.

您只能为每个表指定一个标题.

另请注意,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>

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

可以提供一个按钮,通过操作tbodies来切换所有内容或仅在当前日期之间切换,而无需单独处理多行.