14

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

4

1 回答 1

8

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

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

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

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

1 请注意，如果您使用 a ，则需要将 a<tfoot>放置在之前规范中的任何<tbody>或<tr>元素之前，直到并包括HTML 4和 XHTML 1，以便根据这些文档类型进行验证。从HTML5开始，这不再适用。

于 2013-03-15T19:41:06.823 回答