HTML 表格列分组

HTMLHTMLBeginner
立即练习

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

介绍

HTML <colgroup> 标签用于为 HTML 表格中的一个或多个列应用各种样式。使用 <colgroup> 标签可以避免在表格的每个单元格中定义样式的繁琐操作。通过该标签的 span 属性,你可以将样式应用到指定的列上。

在本实验中,你将学习如何使用 HTML <colgroup> 标签创建带有彩色列的表格。

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



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/TablesGroup(["`Tables`"]) html/MultimediaandGraphicsGroup -.-> html/fig_cap("`Figure and Caption Association`") html/TablesGroup -.-> html/tables("`Table Structure`") html/TablesGroup -.-> html/complex_tbl("`Complex Tables`") html/TablesGroup -.-> html/tbl_access("`Table Accessibility`") subgraph Lab Skills html/fig_cap -.-> lab-70728{{"`HTML 表格列分组`"}} html/tables -.-> lab-70728{{"`HTML 表格列分组`"}} html/complex_tbl -.-> lab-70728{{"`HTML 表格列分组`"}} html/tbl_access -.-> lab-70728{{"`HTML 表格列分组`"}} end

创建 HTML 表格

首先,创建一个 HTML 表格,你将使用 <colgroup> 标签为其应用样式。将以下代码添加到你的 HTML 文件中:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

以上代码创建了一个边框为 1 的表格,并带有标题 "Colored Table"。<colgroup> 标签包含三个 <col> 标签,分别为三列应用了不同的颜色。<thead> 标签包含三个 <th> 标签,分别表示三列的标题。而 <tbody> 标签包含两行,每行有三列。

使用 CSS 实现更好的样式

在这一步中,我们将使用 CSS 为上面创建的表格应用样式。

将以下 CSS 代码添加到你的 HTML 文件中:

<!doctype html>
<html>
  <head>
    <title>Colored Table</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #4169e1;
        color: white;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>
        Colored Table
      </caption>
      <colgroup>
        <col style="background-color: gray;" />
        <col style="background-color: lightblue;" />
        <col style="background-color: lightgreen;" />
      </colgroup>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

在你的 index.html 文件中查看完成的代码。你应该能够看到一个三列的表格,每列都有不同的颜色。

总结

HTML <colgroup> 标签用于为 HTML 表格中的一个或多个列应用各种样式,从而避免在表格的每个单元格中定义样式的繁琐操作。在本实验中,你学习了如何使用 <colgroup> 标签创建带有彩色列的表格,并通过 CSS 为其应用样式。

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