当前位置：首页 > article >正文

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

article 2025/9/25 22:00:58

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

代码运行：

总结

以上就是今天要讲的内容，本文简单记录了HTML-3.3 表格布局（学校官网简易布局实例），仅作为一份简单的笔记使用，大家根据注释理解

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

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。系列文章目录 HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号 HTML…...

编程日记 2025/9/24 18:34:15

Maven构建流程详解：如何正确管理微服务间的依赖关系-当依赖的模块更新后，我应该如何重新构建主项目

文章目录一、前言二、Maven 常用命令一览三、典型场景说明四、正确的构建顺序正确做法是： 五、为什么不能只在 A 里执行 clean install？六、进阶推荐：使用多模块项目（Multi-module Project）七、总结一、前言在现代…...

编程日记 2025/9/21 10:28:52

遗传算法求解旅行商问题分析

目录一、问题分析二、实现步骤 1）初始化种群 2）计算适应度 3）选择操作 4）交叉操作 5）变异操作三、求解结果四、总结本文通过一个经典的旅行商问题，详细阐述在实际问题中如何运用遗传算法来进…...

编程日记 2025/9/24 19:02:12

【hot100-动态规划-300.最长递增子序列】

力扣300.最长递增子序列思路解析本题要求在一个整数数组 nums 中，找到最长严格递增子序列的长度。子序列是指从原数组中派生而来的序列，删除（或不删除）数组中的元素而不改变其余元素的顺序。例如，[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。动态规划思路定义状态：…...

编程日记 2025/6/21 18:08:43

PostgreSQL malformed array literal异常

现象在一个存储过程中编写如下代码（省略与本异常无关的代码）： declare hbsn_arr varchar(240)[]; #bddm.hbsn 内容类似于{"chain0":["NULL"],"chain1":["FESDF09402342","NULL"],...} …...

编程日记 2025/6/12 5:27:38

打造网络安全堡垒，企业如何应对DDoS、CC、XSS和ARP攻击

网站已经成为企业展示形象、开展业务和实现线上营销的重要平台。然而，随着网络攻击手段的不断升级，DDoS、CC、XSS、ARP等攻击频频出现，严重威胁到企业的信息安全和业务稳定。本文将详细阐述网站被攻击后应采取的应急措施及预防策略&#xff0…...

编程日记 2025/9/24 18:34:19

Oracle统计信息收集时的锁持有阶段

Oracle统计信息收集时的锁持有阶段 1 准备阶段（共享模式锁） 锁类型：对象级共享锁（S锁） 持续时间：通常1-5秒主要操作： 验证对象存在性和权限检查统计信息首选项设置确定采样方法和并行度监…...

编程日记 2025/9/23 0:59:47

深度解析物理机服务器故障修复时间：影响因素与优化策略

一、物理机故障修复的核心影响因素物理机作为企业 IT 基础设施的核心载体，其故障修复效率直接关系到业务连续性。故障修复时间（MTTR）受多重因素交叉影响： 1. 故障类型的复杂性硬件级故障： 简单故障：内存…...

编程日记 2025/9/24 18:51:19

印度全印度游戏联合会（AIGF）介绍与用途

本文为印度AIGF的介绍科普文，自去年开始，印度Rummy类游戏申请印度支付都需要拥有AIGF的会员及产品证书。如需要rummy可以通过AIGF审核的源。码，或咨询AIGF的相关内容，可以联。系老妙。全印度游戏联合会（All India G…...

编程日记 2025/9/25 17:26:00

可视化数据图表怎么做？如何实现三维数据可视化？

目录一、三维数据可视化的要点 1. 明确数据可视化的目标 2. 筛选与整理数据 3. 选择合适的图表类型 4. 运用专业工具制作 5. 优化图表的展示效果二、数据可视化图表怎么做？ 1. 理解三维数据的特性 2. 数据处理与三维建模 3. 设置光照与材质效果 4. 添加…...

编程日记 2025/9/24 18:49:37

什么是模态内异质性，什么是模态间异质性？

首先，理解一下“模态”（Modality）和“异质性”（Heterogeneity）。模态：你可以简单理解为不同种类或形式的信息。比如： 文字（文本）是一种模态。图片（图像&…...

编程日记 2025/9/19 20:13:58

视频分辨率增强与自动补帧

一、视频分辨率增强 1.传统分辨率增强方法传统的视频分辨率增强方法主要基于插值技术。这些方法通过对低分辨率视频帧中已知像素点的分布规律和相邻像素之间的相关性进行分析，在两者之间插入新的像素点以达到增加视频分辨率的目的。例如，最近邻插值算…...

编程日记 2025/9/24 18:51:28

【SPIN】用Promela验证顺序程序：从断言到SPIN实战（SPIN学习系列--2）

你写了一段自认为“天衣无缝”的程序，但如何确保它真的没有bug？靠手动测试？可能漏掉边界情况；靠直觉？更不靠谱！这时候，Promela SPIN组合就像程序的“显微镜”——用形式化验证技术，…...

编程日记 2025/9/24 19:12:56

降本增效双突破：Profinet转Modbus TCP助力包布机产能与稳定性双提升

在现代工业自动化领域，ModbusTCP和Profinet是两种常见的通讯协议。它们在数据传输、设备控制等方面有着重要作用。然而，由于这两种协议的工作原理和应用环境存在差异，直接互联往往会出现兼容性问题。此时，就需要一种能够实现Profi…...

编程日记 2025/9/24 18:51:55

JESD204 ip核使用与例程分析（一）

JESD204 ip核使用与例程分析（一） JESD204理解JESD204 与JESD204 PHY成对使用原因JESD204B IP核JESD204B IP核特点JESD204B IP核配置第一页第二页第三页第四页JESD204 PHY IP核配置第一页第二页JESD204理解 JESD204B是一种针对ADC、DAC设计的传输接口协议。此协议包含四层， …...

编程日记 2025/9/24 18:50:55

V837s-LAN8720A网口phy芯片调试

目录前言一、LAN8720A 芯片概述二、硬件连接三、设备树配置四、内核配置五、网口调试总结前言在嵌入式系统开发中，网络连接是至关重要的一部分。v837s开发板搭载了LAN8720A系列的网口PHY芯片，用于实现以太网连接。在开发过程中，对于网口的稳定性和性能的调试至…...

编程日记 2025/7/10 5:06:40

Kubernetes控制平面组件：Kubelet详解（一）：API接口层介绍

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/9/21 20:37:15

算圆形面积错误代码 import mathdef calculate_circle_area(r):try:S math.pi * r**2except r＜0:print("半径不能为负数")return S 正确代码 import mathdef calculate_circle_area(radius):try:if radius < 0:return 0return math.pi * radius…...

编程日记 2025/9/20 12:53:05

牛客网NC22015：最大值和最小值

牛客网NC22015：最大值和最小值题目描述题目要求输入：一行，包含三个整数 a, b, c （1≤a,b,c≤1000000） 输出：两行，第一行输出最大数，第二行输出最小数。样例输入： …...

编程日记 2025/9/25 20:49:00

浪潮云边协同：赋能云计算变革的强力引擎

在数字化浪潮以排山倒海之势席卷全球的当下，第五届数字中国建设峰会在福州盛大开幕。这场以“创新驱动新变革，数字引领新格局”为主题的行业盛会，宛如一座汇聚智慧与力量的灯塔，吸引了国内外众多行业精英齐聚一堂，共同…...

编程日记 2025/9/21 18:21:17

Secs/Gem第七讲(基于secs4net项目的ChatGpt介绍)

好的，那我们现在进入： 第七讲：掉电重连后，为什么设备不再上报事件？——持久化与自动恢复的系统设计关键词：掉电恢复、状态重建、初始化流程、SecsMessage 缓存机制、自动重连、事件再注册本讲目标你将理…...

编程日记 2025/8/8 22:20:13

ruskal 最小生成树算法

https://www.lanqiao.cn/problems/17138/learning/ 并查集ruskal 最小生成树算法 Kruskal 算法是一种用于在加权无向连通图中寻找最小生成树（MST）的经典算法。其核心思想是基于贪心策略，通过按边权从小到大排序并逐步选择边，确保…...

编程日记 2025/9/19 16:26:25

【GESP】C++三级模拟题 luogu-B3848 [GESP样题三级] 逛商场

GESP三级模拟样题，一维数组相关，难度★★✮☆☆。题目题解详见：https://www.coderli.com/gesp-3-luogu-b3848/ 【GESP】C三级模拟题 luogu-B3848 [GESP样题三级] 逛商场 | OneCoderGESP三级模拟样题，一维数组相关，…...

编程日记 2025/9/24 18:50:10

精益数据分析（62/126）：从客户访谈评分到市场规模估算——移情阶段的实战进阶

精益数据分析（62/126）：从客户访谈评分到市场规模估算——移情阶段的实战进阶在创业的移情阶段，科学评估用户需求与市场潜力是决定产品方向的关键。今天，我们结合Cloud9 IDE的实战经验与《精益数据分析》的方法论&…...

编程日记 2025/9/2 11:29:12

MAC-OS X 命令行设置IP、掩码、网关、DNS服务器地址

注意：以下命令必须在 $root 特权模式下运行，即：人们需要显著的提权后才能操作。设置IP sudo networksetup -setmanual "Ethernet" 192.168.0.22 255.255.255.0 192.168.0.8 设置DNS sudo networksetup -setdnsservers "Eth…...

编程日记 2025/6/7 6:51:30

腾讯怎样基于DeepSeek搭建企业应用？怎样私有化部署满血版DS？直播：腾讯云X DeepSeek！

2025新春，DeepSeek横空出世，震撼全球！ 通过算法优化，DeepSeek将训练与推理成本降低至国际同类模型的1/10，极大的降低了AI应用开发的门槛。可以预见，2025年，是AI应用落地爆发之年！ ✔…...

编程日记 2025/9/24 18:34:40

表记录的检索

1.select语句的语法格式 select 字段列表 from 表名 where 条件表达式 group by 分组字段 [having 条件表达式] order by 排序字段 [asc|desc];说明： from 子句用于指定检索的数据源 where子句用于指定记录的过滤条件 group by 子句用于对检索的数据进行分组 ha…...

编程日记 2025/9/24 18:51:35