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

news2025/5/19 9:28:28

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

代码运行：