html表格-合并储存格

想要在html表格中完成合并储存格的效果,需要用到rowspan和colspan分别为垂直和水平合并储存格
先示范rowspan的用法
https://ithelp.ithome.com.tw/upload/images/20210905/20140086zRTmQgarzt.jpg
rowspan="2"可以想成是合并两格的意思,但只要输入的数字大於表格可以往下合并的格数,就只会得到同样的效果
https://ithelp.ithome.com.tw/upload/images/20210905/201400869QUwNdPE0z.jpg
注意rowspan与colspan都需要放在要合并格子的起始点,以上面的例子来说如果放在第二格则会得到以下效果
https://ithelp.ithome.com.tw/upload/images/20210905/20140086i23PjfVxR1.jpg
右下角被合并的格子中也不能有第五个td存在,否则会被视为新一行的格子,如下图
https://ithelp.ithome.com.tw/upload/images/20210905/20140086L2Z7Yvw75l.jpg
https://ithelp.ithome.com.tw/upload/images/20210905/201400864EudmnZfjZ.jpg
虽然最後一个td中没有内容,但还是出现了新的一行格子

再介绍一个rowspan的特殊用法,若输入rowspan="0"就代表合并至最底部,范例如下
https://ithelp.ithome.com.tw/upload/images/20210905/20140086PQXcIK4Xkb.jpg
https://ithelp.ithome.com.tw/upload/images/20210905/20140086OpP0XguxQn.jpg

colspan与rowspan的用法大致相同,就不多做说明,直接看下面范例
https://ithelp.ithome.com.tw/upload/images/20210905/20140086VUm0lYrPS6.jpg
https://ithelp.ithome.com.tw/upload/images/20210905/201400863EVoTo5en7.jpg


<<:  Day 5:认识CSS+CSS tag

>>:  Day05-Variables

从零开始学3D游戏设计:自定义粒子效果

这是 Roblox 从零开始系列,效果章节的第三个单元,今天你将学会如何制作自己想要的粒子效果 Pa...

Golang 测试

Golang 测试 转换一下心情,来尝试看看单元测试好了 在golang上要跑测试的话,可以考虑先试...

[Day05] 运算式与运算子

运算式(Expression):最大的特性是产生一个「值」。像是在呼叫 function 时的参数...

我们注定成不了海贼王

OK!上一篇最後讲了个我亲身体验过会让人掉san值的专案开发经验,但.......那个专案最後还是完...

Day 30-ASP.NET & SQL资料库制作留言板(下)

-前集提要- 要如何把留言的资料(ASP.NET)存到资料库(MSSQL)的留言板。会使用到的工具有...