HTML 表格表头

介绍

在 HTML 中，表格用于以行和列的形式显示数据。<thead> 标签用于定义表格的表头行。表头行通常用于标记下方列中的内容，并包含描述性标签。

注意：你可以在 index.html 中练习编码，并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

创建表格

创建一个 index.html 文件并在你的文本编辑器中打开它。这是你编写 HTML 代码的地方。

使用 <table> 标签创建一个表格。

<table>
  <!-- content goes here -->
</table>

添加表头

使用 <thead> 标签定义表格的表头行。在 <thead> 标签内，使用 <th> 标签添加表头行。

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content goes here -->
  </tbody>
</table>

向表格中插入内容

通过使用 <tbody> 标签以及嵌套的 <tr> 和 <td> 标签向表格中添加内容。

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
    </tr>
    <tr>
      <td>Content 4</td>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
  </tbody>
</table>

为表头添加样式

使用 CSS 为 <thead> 标签添加样式。以下是将表头背景颜色更改为灰色的示例：

<style>
  thead {
    background-color: gray;
  }
</style>

总结

<thead> 标签用于定义表格的表头行。它是 <table> 标签的另一个子元素，位于 <tbody> 和 <tfoot> 标签之前。通过使用 CSS，你可以为表头添加样式，使其更具视觉吸引力。