📜  如何在 HTML 表格中使用页眉和页脚?(1)

📅  最后修改于: 2023-12-03 15:38:16.864000             🧑  作者: Mango

如何在 HTML 表格中使用页眉和页脚?

在 HTML 中,我们可以使用表格来展示数据,但有时候我们需要在表格中添加页眉和页脚来提高可读性和美观度。下面是使用页眉和页脚的示例:

<table>
  <thead>
    <tr>
      <th colspan="3">学生信息表</th>
    </tr>
    <tr>
      <th>姓名</th>
      <th>学号</th>
      <th>班级</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>001</td>
      <td>一班</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>002</td>
      <td>二班</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">共有2条记录</td>
    </tr>
  </tfoot>
</table>

上面的例子中,我们使用了 thead 元素来定义页眉,使用 tfoot 元素来定义页脚,其中 theadtfoot 元素都包含一个 tr 元素,用来定义表格的列名和统计信息。在 thead 元素中,我们使用 colspan 属性来让第一行的单元格跨越三列,作为表格的标题。在 tfoot 元素中,我们使用 colspan 属性来让单元格跨越整个表格宽度,用来显示总记录数。

下面是一个更复杂的例子,展示了如何使用多级表头和多个页脚:

<table>
  <thead>
    <tr>
      <th rowspan="2">学生信息</th>
      <th colspan="3">科目成绩</th>
    </tr>
    <tr>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>80</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>85</td>
      <td>95</td>
      <td>90</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均分</td>
      <td>82.5</td>
      <td>92.5</td>
      <td>87.5</td>
    </tr>
    <tr>
      <td>总分</td>
      <td>165</td>
      <td>185</td>
      <td>175</td>
    </tr>
  </tfoot>
</table>

上面的例子中,我们使用了 rowspan 属性让第一列的单元格跨越两行,作为表格的大标题。在 tfoot 元素中,我们使用了两个 tr 元素来显示平均分和总分,这两个元素并列显示在表格的底部。

总之,在 HTML 中添加页眉和页脚是很容易的,只需要使用 theadtfoot 元素即可。在实际开发中,我们可以根据需求灵活运用多级表头和多个页脚来提高表格的可读性和美观度。