本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
系列文章目录
HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号
HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大
目录
一、HTML 中的 thead、tbody 和 tfoot 元素详解
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、HTML 中的 thead、tbody 和 tfoot 元素详解
在 HTML 表格中，<thead>、<tbody> 和 <tfoot> 是用于组织表格内容的语义化元素，它们有助于提高表格的可访问性和结构清晰度。
1. <thead> - 表格头部
<thead> 元素定义表格的头部区域，通常包含列标题。
特点：
- 必须包含一个或多个
<tr>（表格行）元素 - 通常第一行包含
<th>（表头单元格）元素 - 一个表格只能有一个
<thead>
示例：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>2. <tbody> - 表格主体
<tbody> 元素定义表格的主体内容，包含表格的主要数据。
特点：
- 包含表格的实际数据行
- 可以包含一个或多个
<tr>元素 - 一个表格可以有多个
<tbody>（用于逻辑分组） - 如果省略，浏览器会自动创建一个隐式的
<tbody>
示例：
<table>
<thead>
<!-- 表头 -->
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>设计师</td>
</tr>
</tbody>
</table>
3. <tfoot> - 表格页脚
<tfoot> 元素定义表格的页脚区域，通常包含汇总行或注释。
特点：
- 可以出现在
<thead>之前（视觉上会显示在底部） - 包含汇总行或注释信息
- 一个表格只能有一个
<tfoot>
示例：
<table>
<thead>
<!-- 表头 -->
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
<tfoot>
<tr>
<td colspan="2">总计</td>
<td>100人</td>
</tr>
</tfoot>
</table>
4.组合使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合使用</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>月份</th>
<th>收入</th>
<th>支出</th>
</tr>
</thead>
<tbody>
<tr>
<td>一月</td>
<td>5000</td>
<td>3000</td>
</tr>
<tr>
<td>二月</td>
<td>5500</td>
<td>3200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>10500</td>
<td>6200</td>
</tr>
</tfoot>
</table>
</body>
</html>
代码运行：
5.注意事项
(1)视觉顺序 vs DOM 顺序
<tfoot> 可以在 <thead> 之前定义，但在页面上仍会显示在表格底部。
(2)样式应用
可以为这些部分单独应用 CSS 样式，例如：
thead {
background-color: #f2f2f2;
font-weight: bold;
}
tfoot {
background-color: #e6e6e6;
}这些元素虽然不是强制性的，但使用它们可以使表格结构更清晰，提高代码可读性和可维护性。
二、代码示例-简易的学校官网
总的代码块如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格布局(学校 网页)</title>
<style type="text/css">
body{
background-color: aliceblue;
background-image: url();
background-size: 1000px auto;
/* background-size:100% auto;
background-size:contain;
background-size:cover;*/
}
</style>
</head>
<body>
<!-- thead(表格头部) tbody（表格主体） tfoot（设计表尾样式） 收纳tr -->
<table border="1px" align="center" width="1000px">
<thead>
<tr>
<td>
<img src="../img/5.141.jpg" width="1000px" >
</td>
</tr>
<tr align="center">
<td>
<a href="https://www.ujn.edu.cn/"><img src="../img/5.142.jpg" width="1000px"></a>
</td>
</tr>
</thead>
<tbody>
<table border="1px" align="center" width="1000px">
<tr>
<td colspan="2"><a href="https://www.ujn.edu.cn/"><img src="../img/dangdaihui.jpg" ></a></td>
<td>济南大学召开本科教学工作审核推荐评估会</td>
<td>济南大学召开研究生教学工作审核推荐评估会</td>
</tr>
<tr>
<td colspan="2"><a href="https://www.ujn.edu.cn/"><img src="../img/dangdaihui.jpg" ></a></td>
<td>济南大学召开本科教学工作审核推荐评估会</td>
<td>济南大学召开研究生教学工作审核推荐评估会</td>
</tr>
</table>
</tbody>
<tfoot>
<table border="1px" align="center" width="1000px">
<tr align="center">
<td colspan="10" align="center">
<b align="center">济南大学版权所有 © 1995-2024 非经营性互联网信息服务审批号：鲁ICP备09051414号</b>
<br>
</td>
</tr>
</table>
</tfoot>
</body>
</html>
代码运行：
总结
以上就是今天要讲的内容，本文简单记录了HTML-3.3 表格布局（学校官网简易布局实例），仅作为一份简单的笔记使用，大家根据注释理解