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云服务器降价了!阿里云VS腾讯云
阿里云:2023阿里云服务器价格便宜到家了(值得买)
腾讯云:2023腾讯云2核4G服务器8M带宽70元一年(多配置可选)
华为云:2023华为云优惠活动云服务器60元一年起(查看更多配置报价)
发表评论