何时在HTML表格中使用tbody，colgroup，thead等？ [英] When to use tbody, colgroup, thead, etc, in an HTML table?

问题描述

当我了解HTML表格时，我没有被告知tbody，thead，tfoot，colgroup。你什么时候该使用它们？我去了W3Schools网站，我了解它们是如何工作的，但不知道它们何时使用或不使用它们。 他们如果你想提供有关你的表的其他信息，并组织其中的内容。它们也可以以某种方式影响表格的视觉渲染（尽管这可能会因浏览器而异） - 例如，支持< colgroup> / < col> 是 patchy）。

例如，如果顶部和底部有标题行您可以将它们分别放入< thead> 和< tfoot> 中， < TBODY> 。浏览器将确保无论将< tfoot> 放在任何< tbody> 或< tr> elements ¹ 或者表中有多少数据，如果您的表可能有很多行：

 < table> 
< caption>高分< / caption> 
< thead> 
< th>第>第< th>第>第< th>第>分< / th>< / tr> 
< / thead> 
< tfoot> 
< th>第>第< th>第>第< th>第>分< / th>< / tr> 
< / tfoot> 
< tbody> 
< tr>< td> 1< / td>< td> Alice< / td>< td> 10000< / td>< / tr> 
< tr>< td> 2< / td>< td>鲍勃< / 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> 
 <！ - 最多100个数据行 - > 
< / tbody> 
< / table> 
  

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

 <表> 
< caption>高分< / caption> 
< th>第>第< th>第>第< th>第>分< / th>< / tr> 
 
< tr>< td> 1< / td>< td> Alice< / td>< td> 10000< / td>< / tr> 
< tr>< td> 2< / td>< td>鲍勃< / 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> 
 <！ - 最多100个数据行 - > 
 
< tr>< th>＃< / th>>第< th>< th>< / th>< / tr> 
< / table> 
  

当然，如果您关心这样的事情，这也会使得语义更少。 / p>

---

¹ _{注意，它是必需的 < tfoot> ，如果您使用其中一个，请在 之前放置任何< tbody> 或< tr> 元素，并且包括 HTML 4 和XHTML 1，以便它能够针对这些文档类型进行验证。从 HTML5 开始，这已不再适用。}

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.

解决方案

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

这篇关于何时在HTML表格中使用tbody，colgroup，thead等？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！