06 - table表格标签+ 行合并+列合并

1、table  表格标签属性

在小程序中查看

cellspacing="0"  表格边框合并；

表格：table

      行：tr

      列：td

属性：

      border:边框

      width：宽

      height：高

      bordercolor:变宽颜色

      cellspacing:单元格与单元格之间的距离

      cellpadding:单元格与内容之间的距离

      align:水平的对齐方式，left|center|right

 

<table

border="1"

width="300"

height="200"

bordercolor="red"

cellspacing="0"

cellpadding="0"

align="center"

>

<tr>

<td align="center">1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>21</td>

<td>22</td>

<td>23</td>

</tr>

</table>

 

2、行合并

<!-- table>tr*3>td*3 -->

<table border="1" width="600" height="300" cellspacing="0">

<tr>

<td></td>

<td></td>

<!--

表格合并：行合并（rowspan），列合并（colspan）

不管是行合并还是列合并，都是给td添加

如果是行合并，就删除下一行对应td

-->

<td rowspan="3"></td>

</tr>

<tr>

<td></td>

<td></td>

<!-- <td></td> -->

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

 

3、列合并

<table border="1" width="600" height="300" cellspacing="0">

<tr>

<!--

列合并：

删除本行下面的td

<td colspan="n"></td>

需要删除的就是n-1 td

-->

<td></td>

<td colspan="2"></td>

<!-- <td></td> -->

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>