介绍
在本实验中,你将学习 HTML 中的 <td>
标签,该标签用于定义 HTML 表格中的表格数据。你还将了解可以与此标签一起使用的各种属性。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在本实验中,你将学习 HTML 中的 <td>
标签,该标签用于定义 HTML 表格中的表格数据。你还将了解可以与此标签一起使用的各种属性。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
第一步是创建一个包含一些数据的 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
属性,请添加以下代码:
<!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
属性,请添加以下代码:
<!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
属性,请添加以下代码:
<!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 表格中定义表格数据。你还了解了可以与这个标签一起使用的各种属性,例如 colspan
、rowspan
和 header
,以创建更复杂的表格。