colspan和rowspan合并单元格
程序员文章站
2022-06-05 21:06:41
最近在回顾html的时候,经常碰到一些table标签的问题,其中大多数都是合并单元格,所以在这里记录下自己的探究过程: 上面是我创建的一个常规表格,在这里回顾下table内的几个属性: cellpadding:规定单元格边界与单元格内容之间的间距 cellspacing:规定单元格与单元格之间的间距 ......
最近在回顾html的时候,经常碰到一些table标签的问题,其中大多数都是合并单元格,所以在这里记录下自己的探究过程:
1 <table cellpadding="0" cellspacing="0" border="1" width="200px" height="100px"> 2 <tr> 3 <td>1</td> 4 <td>2</td> 5 <td>3</td> 6 </tr> 7 <tr> 8 <td>4</td> 9 <td>5</td> 10 <td>6</td> 11 </tr> 12 </table>
上面是我创建的一个常规表格,在这里回顾下table内的几个属性:
- cellpadding:规定单元格边界与单元格内容之间的间距
- cellspacing:规定单元格与单元格之间的间距
- border:表格的边框
现在我想实现单元格2与单元格3合并,如下图:
我们知道:将多个单元格合并的时候,会产生多余的单元格,这时候需要把多余的单元格删除,否则会影响表格的结构
<tr> <td>1</td> <td colspan="2">2</td> </tr>
在单元格2上添加colspan="2",即合并两个列单元格,这时候把<td>3</td>删除。
类似的:单元格1与单元格4合并
<tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>5</td> <td>6</td> </tr>
如有错误,欢迎指出~