📅  最后修改于: 2023-12-03 15:38:16.864000             🧑  作者: Mango
在 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
元素来定义页脚,其中 thead
和 tfoot
元素都包含一个 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 中添加页眉和页脚是很容易的,只需要使用 thead
和 tfoot
元素即可。在实际开发中,我们可以根据需求灵活运用多级表头和多个页脚来提高表格的可读性和美观度。