HTML 将HTML表格行分成带标签的部分

在本文中，我们将介绍如何将HTML表格行分成带标签的部分。HTML表格是一种常用的数据展示方式，我们可以使用各种元素来对表格进行设计和美化。其中，将表格行分成部分，并为每个部分标记标签，可以提高表格的可读性和可维护性。

阅读更多：HTML 教程

使用

、

和

元素

HTML提供了

• 元素用于定义表格的页眉部分，一般包含表格的标题或者列的标题。
• 元素用于定义表格的主体部分，一般包含表格的数据行。
• 元素用于定义表格的页脚部分，一般包含表格的小结或者统计数据。

例如，我们有一个包含员工信息的表格，可以将表格的页眉部分显示为”员工信息表”，主体部分显示员工的姓名、职位和工资信息，页脚部分显示工资的总和。代码示例如下：

<table>
  <thead>
    <tr>
      <th colspan="3">员工信息表</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>前端工程师</td>
      <td>10000</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>后端工程师</td>
      <td>12000</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>UI设计师</td>
      <td>8000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">工资总和</td>
      <td>30000</td>
    </tr>
  </tfoot>
</table>

在上述代码中，我们使用

使用

和

元素

除了使用

• 元素用于定义表格列的分组，可以指定一组列的公共属性。
• 元素用于定义表格列的属性，可以在
  元素内部使用。

例如，我们有一个包含商品信息的表格，可以将所有商品的名称列定义为左对齐，价格列定义为右对齐，代码示例如下：

<table>
  <colgroup>
    <col style="text-align:left;">
    <col style="text-align:right;">
  </colgroup>
  <thead>
    <tr>
      <th>商品名</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>5</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>3</td>
    </tr>
    <tr>
      <td>橙子</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

在上述代码中，我们使用

使用CSS样式

除了使用HTML元素进行表格行的分组和标签，还可以使用CSS样式来控制表格的行样式。通过定义不同的class或id，我们可以为表格的行设置不同的样式。

例如，我们有一个包含学生成绩的表格，可以为不同的等级范围设置不同的背景颜色，代码示例如下：

<style>
  .优秀 {
    background-color: green;
  }
  .及格 {
    background-color: yellow;
  }
  .不及格 {
    background-color: red;
  }
</style>
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr class="优秀">
      <td>张三</td>
      <td>90</td>
    </tr>
    <tr class="及格">
      <td>李四</td>
      <td>70</td>
    </tr>
    <tr class="不及格">
      <td>王五</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

在上述代码中，我们使用