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

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

article 2025/9/20 19:31:49

本系列可作为前端学习系列的笔记，代码的运行环境是在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-实战之 百度百科（影视剧介绍） 

目录

系列文章目录 

前言

一、简单分析

1、跨行和跨列合并

（1）跨列合并

（2）跨行合并

二、代码块

总结

前言

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

一、简单分析

1、跨行和跨列合并

 rowspan属性用于跨行合并，colspan属性用于跨列合并，一般将这两个属性写在某个<th>/<td>标签中，也就是单元格标签中。

（1）跨列合并

<tr><td colspan="2"></td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td>
</tr>

代码运行：

可以看到红圈这里跨了两列。

（2）跨行合并

<tr><td rowspan="2">下午</td><td height="100">三</td><td>计算机组成与结构</td><td>           </td><td>计算机组成与结构（9-16）</td><td>            </td><td>大学英语IV</td><td>            </td><td>           </td>
</tr>

代码运行：

 可以看到红圈下午这里横跨了两行。

二、代码块

总的代码块如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格的跨行跨列</title></head><body><!-- rowspan跨行 占几行跨几行 --><!-- colspan跨行 占几行跨几列 --><!-- 数过的细胞不再重复 --><table border="1px" align="center"><tr><td colspan="2"></td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="2">上午</td><td height="100">一</td><td>          </td><td>大学体育IV</td><td>多媒体素材处理</td><td>数据结构</td><td>计算机组成与结构</td><td>Linux系统管理</td><td>            </td></tr><tr><td height="120">二</td><td>计算机网络原理</td><td>毛泽东思想和中国特色社会主义理论体系概论</td><td>计算机网络原理</td><td>毛泽东思想和中国特色社会主义理论体系概论</td><td>web前端技术</td><td>数据结构（1，2，5，6，8，9，11，12）数据结构实验（3，4，7，10，13-16）</td><td>           </td></tr><tr><td rowspan="2">下午</td><td height="100">三</td><td>计算机组成与结构</td><td>           </td><td>计算机组成与结构（9-16）</td><td>            </td><td>大学英语IV</td><td>            </td><td>           </td></tr><tr><td height="100">四</td><td>大学生安全教育（1）</td><td>           </td><td>            </td><td>            </td><td>计算机网络原理实验（9-16）</td><td>            </td><td>           </td></tr></table><!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> --></body>
</html>

代码运行：

总结

以上就是今天要讲的内容，本文简单记录了HTML-3.2 表格的跨行跨列（课表制作实例），仅作为一份简单的笔记使用，大家根据注释理解

相关文章：

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

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

编程日记 2025/9/16 21:32:21

Spring Cloud Sentinel 快速入门与生产实践指南

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言&#xff1a;流量洪峰下的微服务守卫战 &#x1f6e1;️一、Sentinel 核心架构解析1.1 Sentinel 整体架构1.2 核心处理流程 二、快速入门实战2.1 环境搭建全流程…...

编程日记 2025/9/16 21:32:13

系统架构设计（十）：结构化编程

定义 结构化编程是一种遵循清晰逻辑结构、避免使用 goto 的编程方法。它强调使用有限的三种基本控制结构来组织程序&#xff0c;提高程序的可读性、可维护性和可测试性。 它是现代程序设计的基础&#xff0c;被广泛应用于命令式语言&#xff08;如 C、Pascal、Java&#xff0…...

编程日记 2025/9/13 18:54:18

标准差和方差是什么

标准差和方差是什么 标准差的简单理解 标准差是衡量一组数据**离散程度（即数据的分散或集中程度 ）**的统计量。它表示数据集中每个数值与这组数据平均值的偏离程度。 标准差越大，说明数据越分散，波动越大； 标准差越小，说明数据越集中，波动越小 。 可以把数据想象成一群…...

编程日记 2025/5/28 15:29:02

【周输入】510周阅读推荐-3

前文 【周输入】510周阅读推荐-1-CSDN博客 【周输入】510周阅读推荐-2-CSDN博客 本次推荐 目录 前文 本次推荐 算法技术 模型产品 算法技术 vLLM和DeepSpeed部署模型的优缺点_vllm deepspeed-CSDN博客 优点缺点总结vLLM 适用于推理 优化内存管理 高效并行化 功能单…...

编程日记 2025/7/13 4:48:58

Android平台GB28181设备接入与功能支持详解

GB28181协议作为中国国家标准&#xff0c;广泛应用于安防、智慧城市和交通监控等领域。大牛直播SDK提供了全面支持GB28181设备接入的技术方案&#xff0c;能够有效帮助开发者实现设备的快速接入与管理。在本文中&#xff0c;我们将深入介绍大牛直播SDK在Android平台上对于GB281…...

编程日记 2025/9/16 21:31:33

mvc-ioc实现

IOC 1&#xff09;耦合/依赖 依赖&#xff0c;是谁离不开谁 就比如上诉的Controller层必须依赖于Service层&#xff0c;Service层依赖于Dao 在软件系统中&#xff0c;层与层之间存在依赖。我们称之为耦合 我们系统架构或者设计的一个原则是&#xff…...

编程日记 2025/9/20 6:22:34

Windows 11 C:\Windows\Web\Wallpaper

Windows 11 C:\Windows\Web\Wallpaper 纯色壁纸自定义 没一个好看的...

编程日记 2025/9/16 21:31:22

医疗信息系统安全防护体系的深度构建与理论实践融合

一、医疗数据访问系统的安全挑战与理论基础 1.1 系统架构安全需求分析 在医疗信息系统中&#xff0c;基于身份标识的信息查询功能通常采用分层架构设计&#xff0c;包括表现层、应用层和数据层。根据ISO/IEC 27001信息安全管理体系要求&#xff0c;此类系统需满足数据保密性…...

编程日记 2025/7/4 0:46:34

Compose笔记(二十五)--Brush

这一节主要了解一下Compose中Brush,在Jetpack Compose里&#xff0c;Brush是一个重要的 API&#xff0c;它用于定义填充图形的颜色渐变或图案&#xff0c;能够为界面元素添加丰富的视觉效果。简单总结如下: 1 常见场景 填充形状&#xff08;圆形、矩形等&#xff09; 创建渐变…...

编程日记 2025/7/13 4:19:33

Spring Web MVC————入门(3)

今天我们来一个大练习&#xff0c;我们要实现一个登录界面&#xff0c;登录进去了先获取到登录人信息&#xff0c;可以选择计算器和留言板两个功能&#xff0c;另外我们是学后端的&#xff0c;对于前端我们会些基础的就行了&#xff0c;知道ajax怎么用&#xff0c;知道怎么关联…...

编程日记 2025/9/18 11:04:48

HTML 属性详解

HTML 属性详解 HTML（HyperText Markup Language）是创建网页的标准标记语言。在HTML中，元素可以通过属性来扩展其功能。属性是元素的一个特性，它提供了关于元素的额外信息。本文将详细介绍HTML中的常见属性，帮助您更好地理解和运用HTML。 一、HTML属性的基本概念 HTML属…...

编程日记 2025/9/18 13:44:57

NC61 两数之和【牛客网】

文章目录 零、原题链接一、题目描述二、测试用例三、解题思路3.1 排序双指针3.1 散列 四、参考代码4.1 排序双指针4.2 散列 零、原题链接 NC61 两数之和 一、题目描述 二、测试用例 三、解题思路 3.1 排序双指针 基本思路&#xff1a;   先对序列进行排序&#xff0c;然后…...

编程日记 2025/9/16 21:31:10

Java生成可控的Word表格功能开发

在日常办公自动化与系统集成场景中，生成结构化的Word文档已成为一种刚性需求，尤其是带有格式规范、内容动态填充的Word表格（Table）。本文将围绕如何利用Java开发一个可控的Word表格生成功能模块展开，涵盖技术选型、代码实现、边界控制与常见问题处理等方面，帮助开发者快速…...

编程日记 2025/8/15 14:08:09

Node.js中的洋葱模型

文章目录 前言 前言 Node.js中的洋葱模型是一种中间件执行机制&#xff0c;主要用于处理HTTP请求和响应的流程控制。该模型通过层层包裹的中间件结构&#xff0c;实现请求从外到内穿透、响应从内向外返回的顺序执行。以下从核心概念、实现原理、框架差异及实际应用等方面解析&…...

编程日记 2025/9/4 6:26:54

Spring Boot 中 MyBatis 与 Spring Data JPA 的对比介绍

一、核心概念 MyBatis 定义&#xff1a;基于 SQL 的持久层框架&#xff0c;提供灵活的 SQL 映射和自定义查询能力。 特点&#xff1a; 开发者手动编写 SQL&#xff08;XML 或注解&#xff09;。 支持动态 SQL、复杂查询优化。 轻量级&#xff0c;对数据库控制力强。 Spri…...

编程日记 2025/8/11 15:33:41

如何分析动态采样引起的计划不稳定 | OceanBase SQL 调优实践

这篇博客涉及两个知识点&#xff0c;一个是动态采样&#xff0c;另一个是 DAS 执行。 用户的问题和相关结论 我们看看用户在OceanBase 社区论坛发帖中提出的疑问及其所得出的结论。 问题&#xff1a;收集统计信息之前&#xff0c;为什么会出现计划不稳定的情况&#xff1f; …...

编程日记 2025/9/16 21:31:05

如何实现RTSP和RTMP低至100-200ms的延迟：直播SDK的技术突破

在实时音视频传输中&#xff0c;低延迟是直播应用的核心技术要求之一。无论是在线教育、远程医疗&#xff0c;还是实时互动直播&#xff0c;延迟过大会影响用户体验&#xff0c;甚至导致应用无法正常使用。大牛直播SDK&#xff08;SmartMediaKit&#xff09;在RTSP和RTMP播放器…...

编程日记 2025/9/16 21:31:00

symfonos: 2靶场

symfonos: 2 来自 <https://www.vulnhub.com/entry/symfonos-2,331/> 1&#xff0c;将两台虚拟机网络连接都改为NAT模式 2&#xff0c;攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182&#xff0c;靶场IP192.168.23.253 3&…...

编程日记 2025/9/16 21:30:55

【图像生成大模型】Step-Video-T2V：下一代文本到视频生成技术

Step-Video-T2V&#xff1a;下一代文本到视频生成技术 引言Step-Video-T2V 项目概述核心技术1. 视频变分自编码器&#xff08;Video-VAE&#xff09;2. 3D 全注意力扩散 Transformer&#xff08;DiT w/ 3D Full Attention&#xff09;3. 视频直接偏好优化&#xff08;Video-DPO…...

编程日记 2025/9/16 21:30:50

C语言中的指针：从基础到进阶实战

指针是C语言中最具特色且功能强大的特性之一。它们不仅是内存管理的核心工具&#xff0c;还能帮助程序员实现复杂的数据结构和高效算法。本文将从指针的基础知识入手&#xff0c;逐步深入探讨其高级应用&#xff0c;结合实际示例&#xff0c;助你掌握指针的精髓。 一、指针的基…...

编程日记 2025/9/8 22:32:14

深度学习推理引擎---ONNX Runtime

一、基础概念 1. 什么是ONNX Runtime&#xff1f; 定位&#xff1a;由微软开发的跨平台推理引擎&#xff0c;专为优化ONNX&#xff08;Open Neural Network Exchange&#xff09;模型的推理性能设计。目标&#xff1a;提供高效、可扩展的推理能力&#xff0c;支持从云到边缘的…...

编程日记 2025/9/20 1:26:00

JAVA Spring MVC+Mybatis Spring MVC的工作流程*,多表连查

目录 注解总结 将传送到客户端的数据转成json数据 **描述一下Spring MVC的工作流程** 1。属性赋值 BeanUtils.copyProperties(addUserDTO,user); 添加依赖&#xff1a; spring web、mybatis framework、mysql driver Controller和ResponseBody优化 直接改成RestControl…...

编程日记 2025/9/6 12:14:09

ctr查看镜像

# 拉取镜像到 k8s.io 命名空间 sudo nerdctl --namespace k8s.io pull nginx:1.23.4 # 验证镜像是否已下载 sudo nerdctl --namespace k8s.io images 下载镜像到k8s.io名称空间下 nerdctl --namespace k8s.io pull zookeeper:3.6.2 sudo ctr image pull --namespace k8s.io …...

编程日记 2025/6/28 18:12:35

VueUse/Core：提升Vue开发效率的实用工具库

文章目录 引言什么是VueUse/Core&#xff1f;为什么选择VueUse/Core&#xff1f;核心功能详解1. 状态管理2. 元素操作3. 实用工具函数4. 浏览器API封装5. 传感器相关 实战示例&#xff1a;构建一个拖拽上传组件性能优化技巧与原生实现对比常见问题解答总结 引言 在现代前端开发…...

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

数字格式化库 accounting.js的使用说明

accounting.js 是一个用于格式化数字、货币和金额的轻量级库&#xff0c;特别适合财务和会计应用。以下是其详细使用说明&#xff1a; 安装与引入 通过 npm 安装&#xff1a; bash 复制 下载 npm install accounting 引入&#xff1a; javascript 复制 下载 const accounting …...

编程日记 2025/7/9 21:48:36

​Docker 网络

目录 ​前言 ​1. Docker 网络模式​ ​2. 默认 bridge 网络详解​ ​​&#xff08;1&#xff09;特点​ ​​&#xff08;2&#xff09;操作示例​ ​3. host 网络模式​ ​​&#xff08;1&#xff09;特点​ ​​&#xff08;2&#xff09;操作示例​ ​4. overlay…...

编程日记 2025/9/18 15:11:32

【论文阅读】A Survey on Multimodal Large Language Models

目录 前言一、 背景与核心概念1-1、多模态大语言模型&#xff08;MLLMs&#xff09;的定义 二、MLLMs的架构设计2-1、三大核心模块2-2、架构优化趋势 三、训练策略与数据3-1、 三阶段训练流程 四、 评估方法4-1、 闭集评估&#xff08;Closed-set&#xff09;4-2、开集评估&…...

编程日记 2025/9/18 17:03:26

基于多头自注意力机制(MHSA)增强的YOLOv11主干网络—面向高精度目标检测的结构创新与性能优化

深度学习在计算机视觉领域的快速发展推动了目标检测算法的持续进步。作为实时检测框架的典型代表，YOLO系列凭借其高效性与准确性备受关注。本文提出一种基于多头自注意力机制(Multi-Head Self-Attention, MHSA)增强的YOLOv11主干网络结构，旨在提升模型在复杂场景下的目标特征…...

编程日记 2025/7/5 1:30:11

vue3 elementplus tabs切换实现

Tabs 标签页 | Element Plus <template><!-- editableTabsValue 是当前tab 的 name --><el-tabsv-model"editableTabsValue"type"border-card"editableedit"handleTabsEdit"><!-- 这个是标签面板 面板数据 遍历 editableT…...

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