如何使用 HTML5 创建表格的表头单元格

概述

表格中的单元格是两件事的交汇点：行和列。表头是表格的第一行，其列包含数据在下方单元格中所属类别的名称。因此，在本问题中，我们将为表格创建表头单元格。对于表头单元格，表格行的交汇点“<tr>”和表格表头列的交汇点“<th>”将在 HTML5 中为表格创建一个表头单元格。

语法

在表格中创建表头单元格的语法：

<tr>
   <th></th>
   <th></th>
</tr>

  • <tr> − 表示表格行。

  • <th> − 表示表格表头作为表格列。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

算法

步骤 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> 标签内的数据不会居中对齐，但在表格的表头单元格中，我们不需要为单元格设置样式以使文本居中。

Open Compiler
<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> 标签内创建的，因为在将表格迁移到数据库时，它会自动为数据库的表格创建列。

更新于： 2023年4月11日

216 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告