Question

有人在表格中使用HTML tbody的主要原因是什么？它仅用于格式化吗？

我一般使用head和body;我没有使用thead和tbody。

Answer 1

为你的表赋予语义：

<table>
  <thead>
    <tr>
      <th>Person</th>
      <th>Amount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Person1</td>
      <td>$5.99</td>
      <td>02/03/09</td>
    </tr>
    <tr>
      <td>Person2</td>
      <td>$12.99</td>
      <td>08/15/09</td>
    </tr>
  </tbody>
</table>

According to the specification：

表行可以分别使用THEAD，TFOOT和TBODY元素分组为表头，表脚和一个或多个表体部分。这种划分使用户代理能够独立于桌面和桌脚支持滚动桌面。打印长表时，可以在包含表数据的每个页面上重复表头和脚信息。

桌头和桌脚应包含有关表格列的信息。表体应包含表数据行。

如果存在，则每个THEAD，TFOOT和TBODY都包含一个行组。每个行组必须至少包含一行，由TR元素定义。

除了重要的语义重要性（想想屏幕阅读器）之外，您还可以轻松地将标题设置为与数据行不同。另一个相关的例子是jQuery插件，例如Tablesorter插件，可以很容易地找出你的数据结构。

Answer 2

我发现tbody的一个很好的用途是允许行可滚动，同时保持列标题和页脚可见。这仅适用于实际支持css的浏览器。抱歉没有Internet Explorer！

<tbody style="height: 150px; overflow-y: scroll">

Answer 3

如果表格的标题是每一行的第一列怎么办？在这种情况下，无法指定表的标题。它实际上会破坏HTML，因为解析器会假设所有内容都是表格主体的一部分。

为什么这个标签确实是必要的，因为th指定了标题字段 - 浏览器可以通过这些字段找出表的哪一部分是标题。

thead和tbody有什么意义？它们适用于某些情况，并在其他情况下破坏HTML。他们复制了th的功能。它们使代码复杂化并可能导致问题 - 在我了解tbody之前，我认为tr-s是桌子的孩子。

Answer 4

分隔HTML表格的标题（thead），正文（tbody）和页脚（tfoot）部分。这是令人难以置信的有用。一个典型的用法是将列标题放在thead元素中，将数据放在tbody中。 tfoot元素不常见但有时很有用。

顺便说一下，即使你没有指定tbody，它也会隐式为你创建。

您也可以将其用于样式目的，例如：

table thead tr { background-color: yellow; }
table tbody tr { background-color: #C9C9C9; }

在Javascript和jQuery中使用具有可选行的表也很有用（仅作为一个示例）。您通常只对选择或突出显示tbody中的行感兴趣，而不是顶部的标题行。

Answer 5

它可以用于样式，是的，它也有助于jQuery选择器帮助区分您想要选择的元素。毕竟，您可以在 thead 或 tbody 中拥有 tr 标记。

Answer 6

HTML中的 thead ， tbody 和 tfoot 元素用于根据内容将表行分组为逻辑部分。您有两个主要原因需要这样做：

允许主体独立于页眉和/或页脚滚动
为了更容易将不同的样式规则应用于表格的不同部分。

<table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table>

HTML tbody的目的是什么？

6 个答案: