HTML 表格数据单元格

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,你将学习 HTML 中的 <td> 标签,该标签用于定义 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/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-70856{{"`HTML 表格数据单元格`"}} html/doc_flow -.-> lab-70856{{"`HTML 表格数据单元格`"}} html/tables -.-> lab-70856{{"`HTML 表格数据单元格`"}} html/complex_tbl -.-> lab-70856{{"`HTML 表格数据单元格`"}} html/tbl_access -.-> lab-70856{{"`HTML 表格数据单元格`"}} end

创建 HTML 表格

第一步是创建一个包含一些数据的 HTML 表格。打开 index.html 文件并添加以下代码:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

在这里,我们创建了一个包含两行三列的 HTML 表格。<td> 标签用于定义表格中每个单元格的内容。

使用 Colspan 属性

colspan 属性用于指定一个单元格应跨越多少列。要使用 colspan 属性,请添加以下代码:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

在这里,我们使用了 colspan 属性将前两列合并,以在单个单元格中显示人员的姓名。

使用 Rowspan 属性

rowspan 属性用于指定一个单元格应跨越多少行。要使用 rowspan 属性,请添加以下代码:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Male</td>
      </tr>
      <tr>
        <td rowspan="2">Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td colspan="2">Female</td>
      </tr>
    </table>
  </body>
</html>

在这里,我们使用了 rowspan 属性将名字列跨越两行,以在单个单元格中显示人员的姓名。

使用 Header 属性

header 属性用于指定一个单元格与一个或多个表头单元格相关联。要使用 header 属性,请添加以下代码:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <th id="name-header">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td headers="name-header">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td headers="name-header">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

在这里,我们使用了 header 属性来指定第一列与 ID 为 name-header 的表头单元格相关联。

总结

恭喜!你已经学会了如何使用 HTML <td> 标签在 HTML 表格中定义表格数据。你还了解了可以与这个标签一起使用的各种属性,例如 colspanrowspanheader,以创建更复杂的表格。

您可能感兴趣的其他 HTML 教程