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>

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

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等分组。最主要的是，这是一种方便的方式，可以直观地对行进行分组，使数据更具可读性。当然，还有其他用法，但就适用的示例而言，这是我最常用的用法。

是的。来自DTD

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

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

规则时使用多个tbody节 组与组之间是否需要表 行。

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

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

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>

编辑:标题标签属于表，因此应该只存在一次。不要像我这样把每个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>

上面的坏例子:不要复制

上面的示例并没有像您期望的那样呈现，因为这样写表明误解了标题标签。你需要大量的CSS技巧来使它正确呈现，因为你将违背标准。

我在标题标签上搜索了w3c标准，但没有找到明确规定每个表只能有一个标题元素的规则，但事实就是如此。