HTML中的table表单元素colspan和rowspan表示表格跨行或者跨列，colspan和rowspan用于将行或者列合并，码笔记分享 table表单colspan和rowspan详细用法：
table表单colspan和rowspan
colspan是跨列（合并列），rowspan是跨行（合并行），用于td和th标签中。
colspan
colspan是指跨列，colspan用来合并列，colspan=2的话就是合并两列。colspan用来指定table中单元格横向跨越的列数。
col：英文解释为“列”，span是跨度、范围的意思。
rowspan
rowspan是指跨行，rowspan用来合并行，rowspan=2的话就是合并两行。rowspan用来指定table中单元格纵向跨越的行数。
row：英文解释为“行”，span是跨度、范围的意思。
colspan和rowspan使用方法示例
table代码一行跨2列，右侧跨2行
|
1 2 3 4 5 6 7 8 9 10 |
<table border="1"> <tr> <td colspan="2">aaa</td> </tr> <tr> <td>bbb</td> <td>ccc</td> </tr> </table> // table一行跨2列 |
效果如下：
| aaa | |
| bbb | ccc |
代码说明原理：HTML代码首先是一行一行的读，先读第1行，碰到了colspan＝"2"后，就会预先占2列的位置。然后读第2行，先读第1列，再读第2列。
table代码一列跨2行
|
1 2 3 4 5 6 7 8 9 10 |
<table border="1"> <tr> <td>aaa</td> <td rowspan="2">bbb</td> </tr> <tr> <td>ccc</td> </tr> </table> // table一列跨2行代码 |
效果如下：
| aaa | bbb |
| ccc |
代码说明原理：HTML代码一行一行到读，先读第1行第1列，读到第2列后，碰到rowspan="2"，预留2行的位置，然后再读第2行第1列。
table代码一行跨2列，左侧跨2行
|
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <td rowspan="2">aaa</td> <td>bbb</td> </tr> <tr> <td>ccc</td> </tr> </table> // table一列跨2行 |
效果如下：
| aaa | bbb |
| ccc |
跨行跨列复杂组合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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跨多行多列复杂组合 |
效果如下：
| aaa | bbb | ccc |
| ddd | eee | |
| fff | ggg | |
2023腾讯云服务器超便宜，这个价格太可以了，抓紧上车！
- 2核2G3M服务器30元/3个月：点此直达
- 2核2G3M服务器95元一年：点此直达
- 2核2G4M服务器112元/1年：点此直达
- 2核2G4M服务器396元/1年：点此直达
- 2核4G5M服务器168元/3年：点此直达
- 2核4G5M服务器628元/3年：点此直达
- 4核8G12M服务器446元/1年 518元15个月：点此直达
- 8核16G18M服务器1668元/15个月
- 16核32G28M服务器3468元/15个月
注意：以上特价轻量服务器限制条件为“产品首单特惠”，如果你的腾讯云账号已经是老用户，建议重新注册一个腾讯云账号，如果你是新用户符合条件，那么无脑入，这个CPU内存带宽配置，价格确实便宜，值得买！
2023云服务器降价了！阿里云VS腾讯云
阿里云：2023阿里云服务器价格便宜到家了（值得买）
腾讯云：2023腾讯云2核4G服务器8M带宽70元一年（多配置可选）
华为云：2023华为云优惠活动云服务器60元一年起（查看更多配置报价）
发表评论