table合并单元格_制作课程表3——合并单元格

由于浏览器兼容问题,、 以及 很少被使用,

所以我们将课程表依然使用tr、td元素,结合样式实现出前面案例中效果

原来代码:

课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课程5

原来表格效果:

dff05c36715d56315851a2fe935e0d2d.png

为了实现课程表2效果,需要在前面增加一个“课程表”标题,和增加一行星期内容

课程表 星期一 星期二 星期三 星期四 星期五 课程1 课程2 课程3 课程4 课程5 ……

因为课程表前面还需要增加一列,显示上午、下午和晚上

所以在每个tr后面再增加一个单元格td

<table>        <caption>课程表caption>        <tr>            <td>td>            <td>星期一td>            <td>星期二td>            <td>星期三td>            <td>星期四td>            <td>星期五td>        tr>        <tr>            <td>上午td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>            <td>td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>             <td>下午td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>            <td>td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>            <td>晚上td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>    table>

页面效果图如下:

b4b19d65265095ad464434eccbe2b463.png

此时需要合并单元格,

“上午”和下面的单元格合并,需设置rowspan=""属性和值,这表示该单元格(向下)跨越几行的意思,此处跨越两行,所以rowspan="2",同时,被下面合并的单元格td元素要去掉,如下面代码:

(如果该单元格向右跨列合并,则用colspan="")

<table>        <caption>课程表caption>        <tr>            <td>td>            <td>星期一td>            <td>星期二td>            <td>星期三td>            <td>星期四td>            <td>星期五td>        tr>        <tr>            <td rowspan="2">上午td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>             <td rowspan="2">下午td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>        <tr>            <td>晚上td>            <td>课程1td>            <td>课程2td>            <td>课程3td>            <td>课程4td>            <td>课程5td>        tr>    table>

页面效果如下图所示:

0b8af5248599560c95542ce969706df5.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/271068.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库设计:数据库应用系统的生命周期

数据库应用系统的生命周期可以划分为&#xff1a;数据库规划、需求描述与分析、数据库与应用程序设计、数据库设计实现、数据库测试、数据库运维。1、数据库规划 数据库规划是创建数据库应用系统的第一步&#xff0c;也是数据库应用系统的任务描述和目标的明确。数据库规划的内…

从零开始,做一个NodeJS博客(四):服务器渲染页面与Pjax

标签&#xff1a; NodeJS 0 一个星期没更新了 一直在忙着重构代码&#xff0c;以及解决重构后出现的各种bug 现在CSS也有一点了&#xff0c;是时候把遇到的各种坑盘点一下了 1 听歌排行 API 修复与重构 1.1 修复 在加载云音乐听歌排行的时候&#xff0c;有时会出现一个奇怪的…

java 简单事件的使用,如何正确的使用Java事件通知(1)

如何正确的使用Java事件通知(1)通过实现观察者模式来提供 Java 事件通知(Java event notification)似乎不是件什么难事儿&#xff0c;但这过程中也很容易就掉进一些陷阱。本文介绍了我自己在各种情形下&#xff0c;不小心制造的一些常见错误。Java 事件通知让我们从一个最简单的…

Java 自动装箱与拆箱

Java 自动装箱与拆箱 装箱就是自动将基本数据类型转换为包装器类型&#xff08;int–>Integer&#xff09;&#xff1b;调用方法&#xff1a;Integer 的 valueOf(int) 方法 拆箱就是自动将包装器类型转换为基本数据类型&#xff08;Integer–>int&#xff09;。调用方法…

基本系统设备感叹号_win7系统网络图标显示感叹号的问题

有系统之家的小伙伴&#xff0c;在使用win764位纯净版系统上网的时候&#xff0c;出现网络图标显示感叹号的问题。这种问题我们可以通过在网络检测修复中进行自行检测。或者是检查一下是不是硬件设备的问题。详细解决步骤就来看下系统哥小编是怎么做的吧~win7 64系统无法上网显…

硬件编程:STM32串口发送数据和接收数据方式总结!

串口发送数据1、串口发送数据最直接的方式就是标准调用库函数 。void USART_SendData(USART_TypeDef* USARTx, uint16_t Data);第一个参数是发送的串口号&#xff0c;第二个参数是要发送的数据&#xff0c;但是用过的朋友应该觉得不好用&#xff0c;一次只能发送单个字符&#…

Java编程题修院子,了解java虚拟机—JVM相关参数设置(2)

1. JVM相关参数设置JVM相关配置-XX:PrintGC两次次YoungGC&#xff0c;两次FullGC。-XX:PrintGCDetails打印GC时的内存&#xff0c;并且在程序结束时打印堆内存使用情况-XX:PrintHeapAtGC每次GC时会分别打印回收前与回收后堆信息-XX:PrintGCTimeStamps选择打印GC的方式后&…

此异常最初是在此调用堆栈中引发的:_【8】进大厂必须掌握的面试题Java面试异常和线程...

点击上方“全栈程序员社区”&#xff0c;星标公众号重磅干货&#xff0c;第一时间送达Q1。错误和异常有什么区别&#xff1f;错误是在运行时发生的不可恢复的情况。如OutOfMemory错误。这些JVM错误无法在运行时修复。尽管可以在catch块中捕获错误&#xff0c;但是应用程序的执行…

高仿带感魔性病毒源码+成品(最近很火的)

高仿带感魔性病毒源码成品&#xff08;最近很火的&#xff09;娱乐使用。没破坏性 会改壁纸和打乱桌面图标顺序 自己改回来就好 演示地址&#xff1a; 下载地址&#xff1a;链接: http://pan.baidu.com/s/1dF2ZlU5 密码: m95p转载于:https://www.cnblogs.com/blogwy/p/5804711.…

数据库设计:数据库设计的基本步骤介绍

数据库设计主要包括用户需求分析、概念结构设计、逻辑结构设计、物理结构设计、数据库实施阶段、数据库运行和维护阶段等六个阶段。1、用户需求分析 数据库设计人员采用相应的辅助工具对应用对象的功能、性能、限制等要求进行科学实际的分析。2、概念结构设计 概念结构设计主要…

坎蒂雷赋权法 matlab,干货 | 利用MATLAB实现FMCW雷达中的常用角度估计方法

其中在介绍角度估计中&#xff0c;通过对接收差频信号在快慢时间维度的扩展&#xff0c;增加了空域的信息。扩展后的接收差频信号可以表示为其中k表示接收天线的个数&#xff0c;d为天线间距。在“干货|利用MATLAB实现FMCW雷达的角度估计”中&#xff0c;已经介绍了如何理解目标…

vscode 使用笔记

https://code.visualstudio.com/docs/setup/setup-overview#_proxy-server-support 如果使用代理上网时&#xff0c;需要配置&#xff1a; 在 settings.json 中这样设定&#xff1a; // 将设置放入此文件中以覆盖默认设置{"http.proxy": "http://用户名:密码IP:…

数据库设计基础:需求分析相关知识笔记

系统需求分析是用户和相关设计人员对数据库应用系统所涉及的内容和功能描述&#xff0c;主要是以用户角度来了解系统&#xff0c;是数据库逻辑设计和物理设计以及应用程序的涉及都根据系统分析的内容作为基础。该阶段是非常重要的环节&#xff0c;如果该阶段设计的不好&#xf…

matlab 康托尔集,康托尔集的性质特点

康托尔集的性质特点康托三分集中有无穷多个点&#xff0c;所有的点处于非均匀分布状态。此点集具有自相似性&#xff0c;其局部与整体是相似的&#xff0c;所以是一个分形系统。康托三分集具有(1)自相似性&#xff1b;(2)精细结构&#xff1b;(3)无穷操作或迭代过程&#xff1b…

String、StringBuuffer、StringBuilder三者的区别

可变性 String 类中使用 final 关键字字符数组保存字符串&#xff0c; private final char value[] &#xff0c;所以 String 对象是不可变的。 StringBuilder 与 StringBuffer 都继承自 AbstractStringBuilder 类&#xff0c;在 AbstractStringBuilder 中也是使用字符数组保存…

运算符和类型转换

1.类型转换&#xff1a; 分为自动转换和强制转换&#xff0c;一般用强制转换。 其他类型转换为整数&#xff1a;parseInt&#xff08;&#xff09;&#xff1b; 其他类型转换为小数&#xff1a;parseFloat&#xff08;&#xff09;&#xff1b; 判断是否是一个合法的数字类型&a…

数据库设计基础:数据字典相关知识笔记

1、数据字典的定义 数据字典&#xff08;Data Dictionary ,DD&#xff09;是各类数据描述的集合&#xff0c;它是关于数据库中数据的描述&#xff0c;即元数据&#xff0c;而不是数据本身。2、数据字典的组成数据字典主要包括数据项、数据结构、数据流、数据存储、处理过程等内…

用符号方法求下列极限或导数matlab,matlab实验

3&#xff0c;设有矩阵A 和B 1234530166789101769A ,111213141502341617181920970212223242541311B ????????-????????-????????????????1、求它们的乘积C &#xff1b;2、将矩阵C 的右下角3*2子矩阵赋给D &#xff1b;3、察看matlab 工作空间…

事务管理:事务的基本概念笔记

1、事务的意义事务管理是对于一系列数据库操作进行操作。针对多个事务并发执行的数据库当中&#xff0c;如果对共享的数据进行更新操作不进行控制&#xff0c;很有可能会产生数据的不一致性&#xff0c;造成数据库存储无效甚至错误的数据。数据库在运行过程中会受到很多方面的因…

从零开始攻略PHP(8)——面向对象(下)

8.编写代码类 每个分离的函数可以执行一个明确的任务。任务越简单&#xff0c;编写与测试这个函数就越简单&#xff0c;当然也不要将这个函数分得太小——若将程序分成太多的小个体&#xff0c;读起来就会很困难。 使用继承可以重载操作。我们可以替换成一个大的Display()函数&…