数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML5 创建表格的表头单元格
概述
表格中的单元格是两件事的交汇点：行和列。表头是表格的第一行，其列包含数据在下方单元格中所属类别的名称。因此，在本问题中，我们将为表格创建表头单元格。对于表头单元格，表格行的交汇点“<tr>”和表格表头列的交汇点“<th>”将在 HTML5 中为表格创建一个表头单元格。
语法
在表格中创建表头单元格的语法：
<tr> <th></th> <th></th> </tr>
<tr> − 表示表格行。
<th> − 表示表格表头作为表格列。
算法
步骤 1 − 在您喜欢的编辑器中创建一个 HTML 基本代码。
步骤 2 − 现在使用 HTML 的 <table> 标签创建一个表格，并在表格标签内使用 <thead> 和 <tbody> 分别定义表格的表头和主体部分。要创建表头单元格，不需要将 <thead> 标签继承到表格中。但是为了分隔表头和主体，并在浏览器中工作时提供更多功能，我们应该将 <thead> 标签继承到表格中。
<table> <thead> </thead> <tbody> </tbody> </table>
步骤 3 − 开始使用 <tr> 标签为表头部分创建单元格，然后在其中继承 <th> 标签。
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
步骤 4 − 表格表头单元格已成功创建。现在，如果需要，将数据插入表格主体部分，输出将显示在您的浏览器中。
示例
在给定的示例中，我们创建了一个表格来存储员工的记录。其中，表头单元格是使用上面给出的语法创建的。由于表格的表头包含 <th> 标签，因此 <th> 标签具有其预构建的属性，可以增强表格表头标签内文本的显示效果。表格表头单元格中的 <th> 标签使文本看起来更粗体。此外，在普通的表格主体文本中，<td> 标签内的数据不会居中对齐，但在表格的表头单元格中，我们不需要为单元格设置样式以使文本居中。
<html>
<head>
<title>Creating a Header Cell</title>
</head>
<body>
<table border="" align="center" style="text-align: center;">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Profile</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alex</td>
<td>Developer</td>
<td>$500</td>
</tr>
<tr>
<td>2</td>
<td>Samuel</td>
<td>Network Eng.</td>
<td>$600</td>
</tr>
</tbody>
</table>
</body>
</html>
下面给出的图片显示了上述示例的输出，其中我们为“员工记录”表格创建了表格单元格。突出显示的部分显示了创建的四个表头单元格，分别为员工的（序号、姓名、职位和薪资）。
结论
上面创建的表格是单元格的集合，其中插入了数据。作为表头，表格的主体也包含单元格组。唯一的区别是表头单元格是由“<tr>”和“<th>”的交汇点创建的，而主体单元格是由“<tr>”和“<td>”的交汇点创建的，这里“<td>”表示 <tbody> 部分的表格数据。表头单元格是在 <thead> 标签内创建的，因为在将表格迁移到数据库时，它会自动为数据库的表格创建列。
216 次浏览
