掌握 HTML 表格主体

介绍

在 HTML 中，<tbody> 标签用于表示 HTML 表格的主体部分，由表格中的一组行组成。本实验将指导你通过步骤创建一个包含 <tbody> 标签的简单 HTML 表格。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70854{{"HTML 表格主体"}} html/layout -.-> lab-70854{{"HTML 表格主体"}} html/doc_flow -.-> lab-70854{{"HTML 表格主体"}} html/tables -.-> lab-70854{{"HTML 表格主体"}} html/complex_tbl -.-> lab-70854{{"HTML 表格主体"}} html/tbl_access -.-> lab-70854{{"HTML 表格主体"}} end

创建表格标签

在你喜欢的代码编辑器中创建一个名为 index.html 的空 HTML 文件。

在 HTML 文件的 <body> 部分创建一个 <table> 标签。

<body>
  <table></table>
</body>

添加表头 `<thead>` 标签

在 <table> 标签中，创建一个 <thead> 标签，并在其中添加一个包含 <th> 标签的表头行。

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
</table>

添加表格主体 `<tbody>` 标签

在 <table> 标签中，创建一个 <tbody> 标签，并在其中添加包含 <td> 标签的行。

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

添加表格页脚 `<tfoot>` 标签（可选）

在 <table> 标签中，创建一个 <tfoot> 标签，并在其中添加包含 <td> 标签的页脚行。

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total: 2 People</td>
    </tr>
  </tfoot>
</table>

为表格添加样式

使用 CSS 为表格添加样式，包括 <thead>、<tbody> 和 <tfoot>（如果适用）。

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
    color: #444;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

总结

在本实验中，我们学习了如何使用 <tbody> 标签创建一个包含行和列的 HTML 表格。通过按照步骤操作，我们创建了一个包含表头、主体和页脚部分的简单表格，并使用 CSS 为表格添加样式，使其看起来更加专业。<tbody> 标签是构建复杂 HTML 表格的有用工具，通常与其他表格元素结合使用，以创建动态和交互式的数据可视化效果。

HTML 表格主体

介绍

Skills Graph

创建表格标签

添加表头 <thead> 标签

添加表格主体 <tbody> 标签

添加表格页脚 <tfoot> 标签（可选）

为表格添加样式

总结

添加表头 `<thead>` 标签

添加表格主体 `<tbody>` 标签

添加表格页脚 `<tfoot>` 标签（可选）