主要是利用td标签或者th标签的rowspan(行合并)colspan(列合并)两个属性。
我们以程序实例来说明:
1.首先构建一个表格如图
<table border="1" style="height: 200px;width: 200px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td >4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
运行结果如图所示:
2.使用colspan列合并合并第一行的所有列
<table border="1" style="height: 200px;width: 200px;">
<tr>
<td colspan="3">1</td> <!--注意此处的td标签由原来的三个变为一个-->
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
运行结果如图所示:
3.使用rowspan(行合并)合并第一列的所有行
<table border="1" style="height: 200px;width: 200px;">
<tr>
<td rowspan="3">1</td><!--使用rowspan进行合并-->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td><!--注意此处的只有两列 td标签变为2个-->
</tr>
<tr>
<td>7</td>
<td>8</td><!--注意此处的只有两列 td标签变为2个-->
</tr>
</table>
运行结果如下:
如此就通过rowspan和colspan实现了表格的行列合并。
一定要注意的是,合并之后td标签的行列数的变化。否则会得不到预期结果,只相当于占位。