HTML-3.3 表格布局（学校官网简易布局实例）

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

系列文章目录

HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号

HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大

HTML-2.2 列表--无序列表、有序列表、定义列表

HTML-2.3 超链接-外部链接，内部链接，书签链接

HTML-2.4 滚动字幕marquee

HTML-3.1 表格table

HTML-3.2 表格的跨行跨列（课表制作实例）

HTML中应用CSS样式的三种常见方法

HTML-3.3 表格布局（学校官网简易布局实例）

HTML-3.4 表单form

HTML-实战之百度百科（影视剧介绍）

系列文章目录

前言

一、HTML 中的 thead、tbody 和 tfoot 元素详解

1. thead- 表格头部

2. tbody- 表格主体

3. tfoot- 表格页脚

4.组合使用示例

5.注意事项

(1)视觉顺序 vs DOM 顺序

(2)样式应用

二、代码示例-简易的学校官网

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、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>

代码运行：