阿里云99元服务器,新老用户均可买,99元/年续费到2027年,396元4年,多配置特价...
HTML table代码常规的大家都会写,无非是th、tr、td的用法,新手站长网来说说table代码的升级版,table代码跨行跨列,一行对多列或者一列对多行的用法:
跨行跨列、一行占多列或者一列占多行主要使用的代码是colspan
和rowspan
,跨多列时使用colspan
,跨多行时使用rowspan
。例如一行跨2列,可以写colspan="2"
,好了,新手站长网拿实例说话吧:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html
table代码一行跨2列,右侧跨2行
<table border="1"> <tr> <td colspan="2">aaa</td> </tr> <tr> <td>bbb</td> <td>ccc</td> </tr> </table> // table一行跨2列
效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html
aaa | |
bbb | ccc |
代码说明原理:HTML代码首先是一行一行的读,先读第1行,碰到了colspan="2"
后,就会预先占2列的位置。然后读第2行,先读第1列,再读第2列。文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html
table代码一列跨2行
<table border="1"> <tr> <td>aaa</td> <td rowspan="2">bbb</td> </tr> <tr> <td>ccc</td> </tr> </table> // table一列跨2行代码
效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html
aaa | bbb |
ccc |
代码说明原理:HTML代码一行一行到读,先读第1行第1列,读到第2列后,碰到rowspan="2",预留2行的位置,然后再读第2行第1列。文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html
table代码一行跨2列,左侧跨2行
<table> <tr> <td rowspan="2">aaa</td> <td>bbb</td> </tr> <tr> <td>ccc</td> </tr> </table> // table一列跨2行
效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html
aaa | bbb |
ccc |
跨行跨列复杂组合
<table border="1"> <tr> <td rowspan="2">aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>ddd</td> <td>eee</td> </tr> <tr> <td>fff</td> <td colspan="2">ggg</td> </tr> </table> // table跨多行多列复杂组合
效果如下:文章源自新手站长-https://xinshouzhanzhang.com/tablekuahanglie.html
aaa | bbb | ccc |
ddd | eee | |
fff | ggg |
【阿里云99元服务器】入口2核2G3M带宽、新老用户同享、99元/年续费到2027年
2023阿里云优惠活动:xinshouzhanzhang.com/go/aliyun
注意:以上特价轻量服务器限制条件为“产品首单特惠”,如果你的腾讯云账号已经是老用户,建议重新注册一个腾讯云账号,如果你是新用户符合条件,那么无脑入,确实值得。