何时在 HTML 表格中使用 tbody、colgroup、thead 等？ [关闭]

Question

当我学习 HTML 表格时，没有人教我 tbody、thead、tfoot、colgroup。你应该什么时候使用它们？我访问了 W3Schools 网站，了解它们的工作原理，但不知道何时使用或不使用它们。

Answer 1

如果您想提供有关您的表格的其他信息并组织其中的内容，您可以使用它们。它们还可能以某些方式影响表格的视觉呈现（尽管这可能因浏览器而异——例如，对<colgroup>/<col> 的支持非常不完整）。

例如，如果您在顶部和底部有标题行，您可以将它们分别分组到 <thead> 和 <tfoot> 中，并将数据行分组到 <tbody> 中。浏览器将确保 <tfoot> 始终呈现在底部，无论您将其放置在任何 <tbody> 或 <tr> 元素之前或之后，或者您的表格中有多少数据，如果您的表可能有很多行，这很有用：

<table>
  <caption>High Scores</caption>
  <thead>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </thead>
  <tfoot>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </tfoot>
  <tbody>
    <tr><td>1</td><td>Alice</td><td>10000</td></tr>
    <tr><td>2</td><td>Bob</td><td>9000</td></tr>
    <tr><td>3</td><td>Carol</td><td>8500</td></tr>
    <tr><td>4</td><td>Dave</td><td>8000</td></tr>
    <!-- Up to 100 data rows -->
  </tbody>
</table>

否则默认情况下，所有行都被分组到一个 <tbody> 中（即使您没有在表中明确使用 <tbody></tbody> 标记）。因此，如果表格底部有标题行，则必须将它们放在表格的最底部，以便它们最后出现：

<table>
  <caption>High Scores</caption>
  <tr><th>#</th><th>Name</th><th>Score</th></tr>

  <tr><td>1</td><td>Alice</td><td>10000</td></tr>
  <tr><td>2</td><td>Bob</td><td>9000</td></tr>
  <tr><td>3</td><td>Carol</td><td>8500</td></tr>
  <tr><td>4</td><td>Dave</td><td>8000</td></tr>
  <!-- Up to 100 data rows -->

  <tr><th>#</th><th>Name</th><th>Score</th></tr>
</table>

当然，如果您关心这类事情，这也可以说是不那么语义化。

---

¹_{注意，<tfoot>，如果你使用一个，必须放在任何@987654336之前 @ 或 <tr> 之前的规范中的元素，包括 HTML 4 和 XHTML 1，用于验证这些文档类型。从HTML5 开始，这不再适用。}