Question

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

Answer 1

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

例如，如果您在顶部和底部有标题行，则可以将它们分别分别放在<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>，如果您使用的话，之前先前规范中的<tbody>或<tr>元素，包括HTML 4和XHTML 1，以便对这些文档类型进行验证。从HTML5开始，这已不再适用。}

何时在HTML表格中使用tbody，colgroup，thead等？

1 个答案: