- A+
所属分类：HTML&CSS
HTML table代码常规的大家都会写，无非是th、tr、td的用法，新手站长网来说说table代码的升级版，table代码跨行跨列，一行对多列或者一列对多行的用法：
跨行跨列、一行占多列或者一列占多行主要使用的代码是colspan和rowspan，跨多列时使用colspan，跨多行时使用rowspan。例如一行跨2列，可以写colspan="2"，好了，新手站长网拿实例说话吧：
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 | |
2021云服务器价格出炉，便宜有好货！
① 阿里云：2021阿里云特价活动云服务器59元一年起（有高配）
② 代金券：阿里云代金券限量发放中...（有账号就能领）
③ 腾讯云：腾讯云服务器秒杀99元一年起（多款配置可选）
