当前位置: 移动技术网 > IT编程>网页制作>Html5 > colspan和rowspan合并单元格

colspan和rowspan合并单元格

2018年08月30日  | 移动技术网IT编程  | 我要评论
最近在回顾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>

   如有错误,欢迎指出~

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网