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

news2025/5/16 17:06:02

本系列可作为前端学习系列的笔记，代码的运行环境是在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>

代码运行：