html table 表格 行合并 列合并

目录

1.表格边框合并

2、行合并

3、列合并

---

表格：table

      行：tr

      列：td

属性：

      border:边框

      width：宽

      height：高

      bordercolor:变宽颜色

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

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

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

1.表格边框合并

cellspacing="0" 

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