html中th与thead的详细区别

Posted 2023-04-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中th与thead的详细区别相关的知识，希望对你有一定的参考价值。

希望知道这两个标签的所有区别

html中的table可以大致分为三个部分：
thead ----------表头
tbody ----------表躯干
tfoot ----------表注
一般来说：数据的标题放在thead里面，数据放在tbody里面，表格的注释放在tfoot里面。
thead, tbody, tfoot三个标签的使用目的是把一个表格分成三个大的部分，每个部分存放不同的东西，这样这个表格就会比较有结构。所以说：thead, tbody, tfoot相当于三间房子，每间房子都可以用来放东西，主要是把比较相同的东西放在一个房间，这样就容易区分。

<tr></tr>这个标签就是放在三间房子里面的东西，每一个<tr></tr>就是表格一行，你如果打开一张Excel表格就会发现每张表格都是一行一行的。表格的每一行都分为一个一个的小格子，这个就叫------单元格。每一个单元格就是用来存放数据的，这个数据分为两种：一，数据的名称；二，数据本身。
比如一张课程表：

星期一星期二
8:00 语文数学
10:00 历史政治

其中的“星期一” “星期二” “8:00” “10:00” “语文” “数学” “历史” “政治”都是数据，却在于，“星期一” “星期二” “8:00” “10:00”等于数据的名称，“语文” “数学” “历史” “政治”才是真正的数据。

在HTML中，为了把数据名称和真正的数据区别开来，用<th></th>表示数据的名称，也就是标题。<td></td>表示真正的数据内容。所以，以上的那张表格如果用HTML写，那么“星期一” “星期二” “8:00” “10:00”都放在<th></th>里面；“语文” “数学” “历史” “政治”则放在<td></td>里面。参考技术A

其实两者差别挺明显的，thead用于定义表头的内容，比如下面代码加黑的部分，定义表头的颜色等样式

而th标签则和td标签同时使用，分别定义表头内容和表格数据数据。

thead组合表头内容

<!DOCTYPE html>

<html>

<head>

thead color:green;

tbody color:blue;

tfoot color:red;

</style>

</head>

<body>

<thead>F

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

<p><b>提示:</b> thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。</p>

</body>

</html>

---------------------------------------------------------

<!表格>

Month Savings

Sum $180

January $100

February $80

提示: thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，使用 CSS 来为这些元素定义样式，从而改变表格的外观。

css子选择器不适用于thead中的元素

【中文标题】css子选择器不适用于thead中的元素【英文标题】：css child selector does not work towards th elements in a thead 【发布时间】：2015-03-07 21:44:53 【问题描述】：

我有下表：

<table class="table-container">
  <thead class="table-heading">
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="table-column">test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

如果我在 css 中执行以下操作：

.table-body > tr > td 
  padding: 25px;

它没有任何问题。

但如果我在 css 中执行以下操作：

.table-heading > th 
  padding: 25px;

即使 th 元素是 thead 元素的子元素，它也不起作用。有谁知道为什么这不起作用？

【问题讨论】：

您的标记中实际上并没有这些类，是吗？我真的不明白为什么你不能在选择器中使用 tbody 和 thead。 【参考方案1】：

您错过了<thead> 中的<tr> 元素。现代网络浏览器动态添加<tr>，因此.table-heading > th 不会匹配ths，因为它们不是.table-heading 元素的直接后代，而是tr。

例如，试试.table-heading > tr > th 选择器。

.table-heading > tr > th 
  padding: 25px;
  background-color: gold;

<table class="table-container">
  <thead class="table-heading">
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="table-column">test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

【讨论】：

还有另一个不信任表的原因；它们永远不会像你想象的那样。谢谢。我之前已经通过 w3c 验证运行它几次，但我认为此时我正在编写足够有效的 html..但显然我错过了我也需要 tr 在 thead 中。 @Katana 如果您知道一种更好的方法来呈现符合表特征的数据库中的数据，那么请告诉我 @sundance 不，抱歉我太小气了；老实说，对于实际的数据表示，表格确实很有意义。只是许多 Web 开发人员在应该避免使用表格的情况下使用表格。【参考方案2】：

因为您的 HTML 无效，并且大多数浏览器通过将您的 <th>s 包装在 <tr>s 中来纠正它。所以正确的选择器应该是：

.table-heading > tr > th 
  padding: 25px;

jsFiddle example

【讨论】：

以上是关于html中th与thead的详细区别的主要内容，如果未能解决你的问题，请参考以下文章

IE中的html表格thead和th背景

Thymeleaf语法中th:text与th:utext的区别

链表遍历 **while(thead != NULL)** 和 while(thead->next !=NULL) 的区别

［转载］C++中引用与指针的区别(详细介绍)

HTML语言中TR，TH和TD有啥区别

HTML day03表格与表单