HTML 表格行

HTMLHTMLBeginner
立即练习

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

介绍

表格可以用于以结构化格式呈现数据。任何表格的基本组件都是定义一行单元格的表格行(<tr>)元素。表格行必须包含在表格(<table>)元素中。在本实验中,我们将学习如何创建 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/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/complex_tbl("`Complex Tables`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/head_elems -.-> lab-70872{{"`HTML 表格行`"}} html/layout -.-> lab-70872{{"`HTML 表格行`"}} html/tables -.-> lab-70872{{"`HTML 表格行`"}} html/complex_tbl -.-> lab-70872{{"`HTML 表格行`"}} html/tbl_access -.-> lab-70872{{"`HTML 表格行`"}} end

创建 HTML 表格结构

要创建 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 自定义表格。我们还学习了如何合并相邻行以及在表格中创建表头单元格。掌握了这些技能后,你现在可以为你的网页创建美观且结构化的表格了。

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