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

When I learned about HTML tables, I wasn't taught about tbody, thead, tfoot, colgroup. When are you supposed to use them? I went to the W3Schools site and I understand how they work, but not when to use or not use them.

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

1 个解决方案

#1

You use them if you want to supply additional information about your table and organize the content in it. They can also affect the visual rendering of your table in some ways (although this may vary across browsers — for example, support for <colgroup>/<col> is extremely patchy).

如果要提供有关表的其他信息并组织其中的内容,可以使用它们。它们还可以在某些方面影响表的可视化呈现(尽管这可能因浏览器而异 - 例如,对 / 的支持非常不完整)。

For example if you have header rows on the top and bottom you would group them in a <thead> and a <tfoot> respectively, and the data rows in a <tbody>. Browsers will ensure that the <tfoot> is always rendered at the bottom no matter whether you place it before or after any <tbody> or <tr> elements¹ or how much data you have in your table, which is useful if your table potentially has lots of rows:

例如,如果顶部和底部有标题行,则分别将它们分组在和中,将数据行分组在中。浏览器将确保始终在底部呈现,无论您是在任何或元素之前还是之后放置它或者您在表中有多少数据,如果您的表可能有很多行:

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

Otherwise by default all rows are grouped into a single <tbody> (even if you don't make explicit use of <tbody></tbody> tags within your table). Consequently, if you have header rows at the bottom of the table, you will have to place them at the very bottom of the table in order for them to appear last:

否则,默认情况下,所有行都被分组为单个(即使您未在表中明确使用标记)。因此,如果表格底部有标题行,则必须将它们放在表格的最底部才能显示在最后:

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

And of course, this also makes it arguably less semantic if you care about that sort of thing.

当然,如果你关心那种事情,这也可以说它的语义更少。

¹_{Note that it is required that a <tfoot>, if you use one, be placed before any <tbody> or <tr> elements in previous specifications up to and including HTML 4 and XHTML 1 for it to validate against those doctypes. This is no longer true as of HTML5.}

1请注意,要求(如果使用的话)放在先前规范中的任何或元素之前,并且包括HTML 4和XHTML 1,以便对这些文档类型进行验证。从HTML5开始,这已不再适用。

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