数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究区分 HTML 表格中的 <th> 和 <thead> 标签
在我们了解差异之前，重要的是要理解 <th> 和 <thead> 标签都用于在 HTML 表格中提供标题。但是，<th> 标签用于为表格单元格提供标题，而 <thead> 标签用于为表格组提供标题。
这两个标签不能相互替换，输出结果保持不变，因为只有开发者或浏览器才能理解其中的区别。
让我们深入文章，更好地理解 HTML 表格中 <th> 和 <thead> 标签之间的区别。
HTML <th> 标签
在 HTML 中，表格基本上包含两个组件 - 标题单元格和数据单元格。HTML <th> 标签指定表格单元格的标题。为了方便所有人查找列的标题，表格中每个单元格的标题默认情况下始终为粗体并居中；每个表示数据单元格的 <td> 标签都与它有直接关联。
语法
以下是 HTML <th> 标签的语法
<tr> <th>…</th> <th>…</th> </tr>
示例
以下是一个示例，我们将使用 HTML <th> 标签。
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 2px solid #A569BD;
}
</style>
<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> 标签
<thead> 标签帮助浏览器或搜索引擎识别表格标题在表格主体中的位置。此标签支持 <tbody> 和 <tfoot>。为了在表格中使用此标签，<thead> 内必须有一个 <tr> 标签。当需要打印较大的多页表格时，此元素也很有用，因为它允许表格的标题和页脚分别打印在页面的顶部和底部。
语法
以下是 HTML <thead> 标签的语法
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
示例
在以下示例中，我们将使用 HTML <thead> 标签。
<!DOCTYPE html>
<html>
<style>
thead {
color: #6C3483;
}
tbody {
color: #DE3163;
}
tfoot {
color: #145A32;
}
table,
th,
td {
border: 2px solid #DFFF00;
}
</style>
<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> 标签之间的一些区别
<th> 标签 |
<thead> 标签 |
|---|---|
属于内联块级元素家族。 |
是一种特殊的块级元素。 |
允许用户区分标题和数据单元格。 |
允许用户支持单独的表格头和页脚滚动。 |
指定单元格的标题。 |
描述表格组的标题。 |
用户可以看见标题，因为它显示为粗体。 |
用户无法看见标题。 |
是列的标题。 |
是表格的标题。 |
输出显示在表格本身中。 |
用户无法看到输出；它仅对浏览器有效。 |
会影响表格的设计。 |
不会影响设计。 |
指定每行开头或结尾的垂直标题。 |
指定整个宽度的水平标题。 |
772 次浏览
