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

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

article 2025/9/16 13:20:09

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

代码运行：