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、列合并

列合并： 删除本行下面的td 需要删除的就是n-1 td

<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>

在小程序中查看