HTML table跨行跨列一行占多列一列占多行用法

2018年5月27日09:14:20 发表评论 2,564 views
2022云服务器活动

阿里云:2核4G6M服务器68元/年、2核4G服务器198元/年、4核8G服务器346元一年、8核16G5M 更多...
腾讯云:腾讯云2核4G服务器8M带宽70元/年,更多1c2g/2c4g/2c8g/4c8g/8c16g/16c32g...
华为云:华为云1核2G服务器39元/年,有香港节点更多1c2g/2c4g/2c8g/4c8g/8c16g/16c32g...

HTML table代码常规的大家都会写,无非是th、tr、td的用法,新手站长网来说说table代码的升级版,table代码跨行跨列,一行对多列或者一列对多行的用法:

跨行跨列、一行占多列或者一列占多行主要使用的代码是colspanrowspan,跨多列时使用colspan,跨多行时使用rowspan。例如一行跨2列,可以写colspan="2",好了,新手站长网拿实例说话吧:

table代码一行跨2列,右侧跨2行

效果如下:

aaa
bbb ccc

代码说明原理:HTML代码首先是一行一行的读,先读第1行,碰到了colspan="2"后,就会预先占2列的位置。然后读第2行,先读第1列,再读第2列。

table代码一列跨2行

效果如下:

aaa bbb
ccc

代码说明原理:HTML代码一行一行到读,先读第1行第1列,读到第2列后,碰到rowspan="2",预留2行的位置,然后再读第2行第1列。

table代码一行跨2列,左侧跨2行

效果如下:

aaa bbb
ccc

跨行跨列复杂组合

效果如下:

aaa bbb ccc
ddd eee
fff ggg

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: