大家好，欢迎来到IT知识分享网。
1.colspan属性（跨列）
示例
<table width="500" height="500" cellspacing="0" border="1"> <tr> <!--因为rowspan是跨列，导致1.1这个单元格跨列后占了2个单元格宽度的位置--> <td colspan="2">1.1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> </table> 运行效果
修改：
<tr> <td colspan="2">1.1</td> <!--<td>1.2</td> 去掉一个单元格--> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> 运行效果：
2.rowspan属性（跨行）
示例
<table width="500" height="500" cellspacing="0" border="1"> <tr> <!--因为colspan是跨列，导致1.1这个单元格跨列后占了2个单元格宽度的位置--> <td colspan="2">1.1</td> <!--<td>1.2</td>--> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <!--因为rowspan是跨行，导致2.1这个单元格跨行后占了2个单元格高度的位置--> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> 运行效果
问题：和上述跨列的问题类似，跨行时会使单元格的高度改变，从而影响到其它行的结构。
解决：这里我们删除第三行的一个单元格即可。
修改
<tr> <!--<td>3.1</td>--> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> 运行效果
3.综合练习
需求： 1.新建一个五行， 五列的表格 2.第一行的第一列的单元格要跨两列 3.第二行第一列的单元格跨两行 4.第四行第四列的单元格跨两行两列 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格跨行跨列</title> </head> <body> <!-- colspan 属性设置跨列 rowspan 属性设置跨行 --> <table width="500" height="500" cellspacing="0" border="1"> <tr> <td colspan="2">1.1</td> <!--<td>1.2</td>--> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <!--<td>3.1</td>--> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td rowspan="2" colspan="2">4.4</td> <!--<td>4.5</td>--> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> <!--<td>5.4</td>--> <!--<td>5.5</td>--> </tr> </table> </body> </html> 运行效果
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/132773.html
