学习Html5笔记——跨列表格rowspan

这个故事发生在某天,到华南植物园周边喝完早茶回公司,上网收集有趣汉语作品,整理修订多年前写好的《JavaScript》教程,并创作汉语SEO要用的《CSS语言》教程,存起来以后当文化传播作品使用。

一边整理《JavaScript》教程,一边在网上和女粉丝侃大山。
突然间,一个说自已是从福建厦门来广州学现代汉语的女粉丝问:“陈老师,最近文化传播教程又打算教点什么新东西?”。
我问:“你们都想学啥?”。
女粉丝说:“陈老师!我想知道表格跨列用法。“下面就给大家讲下这个问题。

在Html5中,把表格同一列上的格子合并起来叫做跨例,做这个试验要用到属性rowspan,如语法1。

语法


单独设计一个tr行元素,有三个td容器元素,内容如html语言1。


微信公众号:design-Rabbit
Q:364807629
Q:364807629


设计tr,td元素做试验用,内容如html语言2。


Q:364807629
Q:364807629


Q:364807629
Q:364807629


把html语言1~2移植到html5基础框架中,如html语言3。





学习html5笔记,跨列表格rowspan,微信公众号:design-Rabbit


微信公众号:design-Rabbit Q:364807629 Q:364807629
Q:364807629 Q:364807629
Q:364807629 Q:364807629


运行html语言3,就可以看到图1的效果,如果还不会运行方法,可以看我以前写的Html5,学习代码运行方法。
注:看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。

图1

看到图1效果就说明我们的跨列试验成功了,我们可以看到第一列合并到一起了。
好!杰哥Html5学习笔记分享到这里,要知后事如何请关注收我的微信公众号,如果喜欢请打赏。

你可能感兴趣的:(学习Html5笔记——跨列表格rowspan)