数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学区分HTML表格中的<th>和<thead>标签
在我们了解区别之前，重要的是要理解<th>和<thead>标签都用于在HTML表格中提供表头。在HTML中，<th>标签用于提供表格单元格的表头，而<thead>标签用于提供表格组的表头。
这两个标签不能互相替换，输出结果保持不变，因为只有开发者或浏览器才能理解其中的区别。
让我们深入了解一下HTML表格中<th>和<thead>标签的区别。在我们深入了解区别之前，让我们简要了解一下HTML中的<th>和<thead>标签。
HTML <th>标签
此标签指定表格单元格的标题。为了方便每个人找到列的表头，表格中每个单元格的表头默认情况下总是粗体且居中。每个<td>标签都与它直接相关。在HTML中，表格主要由两部分组成：表头单元格和数据单元格。
语法
以下是HTML <th>标签的语法
<tr> <th>…</th> <th>…</th> </tr>
示例
下面的示例中，我们将使用HTML <th>标签。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #A569BD;
}
</style>
</head>
<body style="background-color:#D5F5E3 ">
<table>
<tr>
<th>Car</th>
<th>Price</th>
</tr>
<tr>
<td>RS7</td>
<td>$1000</td>
</tr>
<tr>
<td>Bugati</td>
<td>$8000</td>
</tr>
</table>
</body>
</html>
执行上述代码后，它将生成一个包含表格以及应用于网页上显示的CSS的输出。
HTML <thead>标签
此标签帮助浏览器或搜索引擎识别表格标题在表格主体中的位置。此标签支持<tbody>和<tfoot>。为了在表格中使用此标签，<thead>内部必须有一个<tr>标签。当需要打印包含多个页面的大型表格时，此元素也很好用，因为它使表格的表头和表尾可以分别打印在页面顶部和底部。
语法
以下是HTML <thead>标签的语法
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
示例
在下面的示例中，我们将使用HTML <thead>标签。
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: #6C3483;
}
tbody {
color: #DE3163;
}
tfoot {
color: #145A32;
}
table,
th,
td {
border: 2px solid #DFFF00;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Bike</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vespa</td>
<td>1000</td>
</tr>
<tr>
<td>Enfield</td>
<td>1100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2100</td>
</tr>
</tfoot>
</table>
</body>
</html>
运行上述代码后，输出窗口将弹出，在网页上显示应用了CSS的表格。
<th>和<thead>标签的区别
<th>标签 |
<thead>标签 |
|---|---|
它属于内联块元素家族。 |
它是一种特殊的块级元素。 |
它使用户能够区分表头和数据单元格。 |
它使用户能够支持单独的表头和表尾滚动。 |
它指定单元格的表头。 |
它描述表格组的表头。 |
用户可以看到表头，因为它以粗体显示。 |
用户看不到表头。 |
它是列的表头。 |
它是表格的表头。 |
表格本身包含输出。 |
用户看不到输出；它仅对浏览器有效。 |
它会影响表格的设计。 |
它不会影响设计。 |
指定每一行开头或结尾的垂直表头。 |
它指定全宽的水平表头。 |
500 次浏览
