介绍
表格可以用于以结构化格式呈现数据。任何表格的基本组件都是定义一行单元格的表格行(<tr>
)元素。表格行必须包含在表格(<table>
)元素中。在本实验中,我们将学习如何创建 HTML 表格行。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
表格可以用于以结构化格式呈现数据。任何表格的基本组件都是定义一行单元格的表格行(<tr>
)元素。表格行必须包含在表格(<table>
)元素中。在本实验中,我们将学习如何创建 HTML 表格行。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
要创建 HTML 表格,我们首先需要定义表格的结构。首先创建一个名为 index.html
的 HTML 文件,并在文件中添加以下代码:
<!doctype html>
<html>
<head>
<title>My Table</title>
</head>
<body>
<table>
<tr>
<th>Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
</table>
</body>
</html>
在这段代码中,我们创建了一个包含两行两列的 HTML 表格。第一行包含两个表头单元格(<th>
),第二行包含两个数据单元格(<td>
)。
要向表格中添加更多行,我们需要在表格中添加更多的 <tr>
元素。例如,要在表格中添加另一行,可以在现有的 <tr>
元素之间添加以下代码:
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
现在,表格有三行,每行包含两个单元格。
我们可以使用 CSS 为表格行添加样式。在 <head>
元素中添加以下样式,为偶数行添加背景颜色:
<style>
tr:nth-child(even) {
background-color: lightgray;
}
</style>
这段代码将为表格中的每隔一行添加 lightgray
背景颜色。
我们可以使用 rowspan
属性将两个或多个相邻的行合并为一行。例如,假设我们想将前两行合并为一行,可以将第一个 <tr>
元素替换为以下代码:
<tr>
<th rowspan="2">Header Cell 1</th>
<th>Header Cell 2</th>
</tr>
第一个表头单元格中的 rowspan="2"
属性会将前两行合并为一行。
我们可以使用 <th>
元素在表格中创建表头单元格。表头单元格通常用于描述列的内容。要为第一列添加表头单元格,可以将第二行中的第一个 <td>
元素替换为以下代码:
<th scope="row">Data Cell 1</th>
<th>
元素中的 scope="row"
属性指定这是第一行的表头单元格。
在本实验中,我们学习了如何创建 HTML 表格行,并使用 CSS 自定义表格。我们还学习了如何合并相邻行以及在表格中创建表头单元格。掌握了这些技能后,你现在可以为你的网页创建美观且结构化的表格了。